若依框架中自帶一個(gè)指令v-hasPermi，這個(gè)指令配合若以框架可以很方便地幫助開(kāi)發(fā)者進(jìn)行權(quán)限判斷，如以下代碼可以判斷用戶是否擁有刪除按鈕的權(quán)限，并按需加載刪除按鈕（有刪除權(quán)限顯示，無(wú)刪除權(quán)限則不顯示）：

<el-button size="mini" v-hasPermi="['test:remove']">刪除</el-button>

v-hasPermi有兩個(gè)需要注意的地方

1.如果v-hasPermi和v-if需要同時(shí)使用，需要分為兩級(jí)DOM，父級(jí)使用v-hasPermi，子級(jí)使用v-if

以如下代碼做演示：

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="state" label="狀態(tài)" />
    <el-table-column label="if-父級(jí)；hasPermi-子級(jí)">
        <template slot-scope="scope">
            <el-button type="text" class="mr10" size="small">查看</el-button>
            <span v-if="scope.row.state == '未提交'">
                <el-button type="text" size="small" v-has-permi="['test:edit']">編輯</el-button>
                <el-button type="text" size="small" v-has-permi="['test:edit']">提交</el-button>
            </span>
            <span v-if="scope.row.state == '待審批'">
                <el-button type="text" class="clE34142" size="small" v-has-permi="['test:approve']">審批</el-button>
            </span>
        </template>
    </el-table-column>
    <el-table-column label="在同一個(gè)DOM">
        <template slot-scope="scope">
            <el-button type="text" class="mr10" size="small">查看</el-button>
            <el-button type="text" size="small" v-if="scope.row.state == '未提交'" v-has-permi="['test:edit']">編輯
            </el-button>
            <el-button type="text" size="small" v-if="scope.row.state == '未提交'" v-has-permi="['test:edit']">提交
            </el-button>
            <el-button type="text" class="clE34142" size="small" v-if="scope.row.state == '待審批'"
                v-has-permi="['test:approve']">審批</el-button>
        </template>
    </el-table-column>
    <el-table-column label="正常情況">
        <template slot-scope="scope">
            <el-button type="text" class="mr10" size="small">查看</el-button>
            <span v-has-permi="['test:edit']">
                <el-button type="text" size="small" v-if="scope.row.state == '未提交'">編輯</el-button>
                <el-button type="text" size="small" v-if="scope.row.state == '未提交'">提交</el-button>
            </span>
            <span v-has-permi="['test:approve']">
                <el-button type="text" class="clE34142" size="small" v-if="scope.row.state == '待審批'">審批</el-button>
            </span>
        </template>
    </el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :total="23" @current-change="handleCurrentChange" />


// 數(shù)據(jù)準(zhǔn)備
handleCurrentChange(val) {
    if(val == 1) {
        this.tableData = [
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '未提交' },
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '未提交' },
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '未提交' },
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '已審批' },
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '已審批' },
        ]
    }else if(val == 2) {
        this.tableData = [
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '已審批' },
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '已審批' },
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '已審批' },
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '已審批' },
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '已審批' },
        ]
    }else if(val == 3) {
        this.tableData = [
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '待審批' },
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄', state: '待審批' },
        ]
    }
},

在以上代碼中，數(shù)據(jù)一共分為三種情況：未提交、待審批、已審批
未提交時(shí)，可以進(jìn)行 修改 和 提交 操作；待審批時(shí)，可以進(jìn)行 審批 操作；已審批時(shí)，不可以進(jìn)行額外操作
準(zhǔn)備的數(shù)據(jù)為：
第一頁(yè)：三條未提交，兩條待審批；第二頁(yè)：五條待審批；第三頁(yè)：兩條已審批
v-if和 v-hasPermi在此處一共有三種情況：v-if 在父級(jí)元素上， v-hasPermi在子級(jí)元素上；v-if和 v-hasPermi在同一級(jí)元素上；v-hasPermi 在父級(jí)元素上， v-if在子級(jí)元素上；三種情況分別對(duì)應(yīng)表格的三列
以三種情況分別初始化加載一、二、三頁(yè)的數(shù)據(jù)時(shí)，初始化表現(xiàn)都正常，但是切換頁(yè)碼時(shí)會(huì)出現(xiàn)以下問(wèn)題：

• 初始化加載第一頁(yè)數(shù)據(jù)，三種情況初始化第一頁(yè)都表現(xiàn)正常；從第一頁(yè)切換到第二頁(yè)，三種情況第二頁(yè)都表現(xiàn)正常；從第一頁(yè)切換到第三頁(yè)，第一種和第二種情況表現(xiàn)異常（展示“審批”按鈕），第三種情況展示正常

  
  
  第一種、第二種多了“審批”按鈕

以下簡(jiǎn)略描述：

• 1==>2==>3==>1，此時(shí)第一頁(yè)的前三條數(shù)據(jù)應(yīng)該展示“編輯”和“提交”按鈕，但是第一種和第二種情況的前兩條數(shù)據(jù)只展示了“提交”按鈕（“編輯”按鈕被v-hasPermi影響移除了），第三種情況展示正常
  

  第一種、第二種情況，被第三頁(yè)的權(quán)限判斷影響，缺少了第一個(gè)需要權(quán)限判斷的按鈕（“編輯”按鈕）

• 1==>2==>3==>1==>3,此時(shí)第一種、第三種情況展示正常，第二種情況展示異常（多展示了“審批”按鈕）

  
  
  第二種多了“審批”按鈕

• 1==>2==>3==>1==>3==>1,此時(shí)第二種、第三種情況展示正常，第一種情況展示異常（少展示了“編輯”按鈕）

  
  
  第一種情況，被第三頁(yè)的權(quán)限判斷影響，缺少了第一個(gè)需要權(quán)限判斷的按鈕（“編輯”按鈕）

其他情況不做一一展示
總之：當(dāng)v-if 和v-hasPermi需要同時(shí)使用時(shí)，需要把v-hasPermi放在父元素，v-if放在子元素使用，其他情況初始化時(shí)可能會(huì)展示正常，但是經(jīng)過(guò)數(shù)據(jù)狀態(tài)變化之后，可能會(huì)出現(xiàn)奇奇怪怪的問(wèn)題

2.v-hasPermi的原理是在元素加載完成后，判斷用戶無(wú)權(quán)限時(shí)，把加了權(quán)限判斷的元素移除，所以<i>v-hasPermi</i>只能加在可以編譯為DOM的元素上，不能加在template上

<div>
    v-hasPermi 加在可編譯為DOM的元素上：
    <el-button size="small" type="primary" v-has-permi="['test:edit']">編輯</el-button>
    <el-button size="small" type="danger" v-has-permi="['test:approve']">審批</el-button>
</div>
<div class="mt10">
    v-hasPermi 加在template上：
    <template v-has-permi="['test:edit']">
        <el-button size="small" type="primary">編輯</el-button>
    </template>
    <template v-has-permi="['test:approve']">
        <el-button size="small" type="danger">審批</el-button>
    </template>
</div>

image.png