若依框架中自帶一個指令v-hasPermi钓辆，這個指令配合若以框架可以很方便地幫助開發(fā)者進行權(quán)限判斷，如以下代碼可以判斷用戶是否擁有刪除按鈕的權(quán)限洛退，并按需加載刪除按鈕（有刪除權(quán)限顯示碌廓，無刪除權(quán)限則不顯示）：
<el-button size="mini" v-hasPermi="['test:remove']">刪除</el-button>
v-hasPermi有兩個需要注意的地方
1.如果v-hasPermi和v-if需要同時使用闰非，需要分為兩級DOM，父級使用v-hasPermi，子級使用v-if
以如下代碼做演示：
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="state" label="狀態(tài)" />
<el-table-column label="if-父級萝嘁；hasPermi-子級">
<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="在同一個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ù)準備
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ù)為：
第一頁：三條未提交蚕断，兩條待審批拔恰；第二頁：五條待審批；第三頁：兩條已審批
v-if和 v-hasPermi在此處一共有三種情況：v-if 在父級元素上基括， v-hasPermi在子級元素上颜懊；v-if和 v-hasPermi在同一級元素上；v-hasPermi 在父級元素上风皿， v-if在子級元素上河爹；三種情況分別對應表格的三列
以三種情況分別初始化加載一、二桐款、三頁的數(shù)據(jù)時咸这，初始化表現(xiàn)都正常，但是切換頁碼時會出現(xiàn)以下問題：
-
初始化加載第一頁數(shù)據(jù)魔眨，三種情況初始化第一頁都表現(xiàn)正常媳维；從第一頁切換到第二頁，三種情況第二頁都表現(xiàn)正常遏暴；從第一頁切換到第三頁侄刽，第一種和第二種情況表現(xiàn)異常（展示“審批”按鈕），第三種情況展示正常
第一種朋凉、第二種多了“審批”按鈕
以下簡略描述：
-
1==>2==>3==>1州丹，此時第一頁的前三條數(shù)據(jù)應該展示“編輯”和“提交”按鈕，但是第一種和第二種情況的前兩條數(shù)據(jù)只展示了“提交”按鈕（“編輯”按鈕被
v-hasPermi影響移除了）杂彭，第三種情況展示正常
第一種墓毒、第二種情況，被第三頁的權(quán)限判斷影響亲怠，缺少了第一個需要權(quán)限判斷的按鈕（“編輯”按鈕） -
1==>2==>3==>1==>3,此時第一種所计、第三種情況展示正常，第二種情況展示異常（多展示了“審批”按鈕）
第二種多了“審批”按鈕 -
1==>2==>3==>1==>3==>1,此時第二種团秽、第三種情況展示正常主胧，第一種情況展示異常（少展示了“編輯”按鈕）
第一種情況钾腺，被第三頁的權(quán)限判斷影響，缺少了第一個需要權(quán)限判斷的按鈕（“編輯”按鈕）
其他情況不做一一展示
總之：當v-if 和v-hasPermi需要同時使用時讥裤，需要把v-hasPermi放在父元素放棒，v-if放在子元素使用，其他情況初始化時可能會展示正常己英，但是經(jīng)過數(shù)據(jù)狀態(tài)變化之后间螟，可能會出現(xiàn)奇奇怪怪的問題
2.v-hasPermi的原理是在元素加載完成后，判斷用戶無權(quán)限時损肛，把加了權(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>
