若依框架的v-hasPermi

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

<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="狀態" />
    <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" />


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

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

  • 初始化加載第一頁數據，三種情況初始化第一頁都表現正常；從第一頁切換到第二頁，三種情況第二頁都表現正常；從第一頁切換到第三頁，第一種和第二種情況表現異常（展示“審批”按鈕），第三種情況展示正常


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

以下簡略描述：

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

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

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


    第二種多了“審批”按鈕

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


    第一種情況，被第三頁的權限判斷影響，缺少了第一個需要權限判斷的按鈕（“編輯”按鈕）

其他情況不做一一展示
總之：當v-if 和v-hasPermi需要同時使用時，需要把v-hasPermi放在父元素，v-if放在子元素使用，其他情況初始化時可能會展示正常，但是經過數據狀態變化之后，可能會出現奇奇怪怪的問題

2.v-hasPermi的原理是在元素加載完成后，判斷用戶無權限時，把加了權限判斷的元素移除，所以<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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容