若依框架的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

若依框架的v-hasPermi

1.如果v-hasPermi和v-if需要同时使用，需要分为两级DOM，父级使用v-hasPermi，子级使用v-if

2.v-hasPermi的原理是在元素加载完成后，判断用户无权限时，把加了权限判断的元素移除，所以<i>v-hasPermi</i>只能加在可以编译为DOM的元素上，不能加在template上

推荐阅读更多精彩内容

1.如果`v-hasPermi`和`v-if`需要同时使用，需要分为两级DOM，父级使用`v-hasPermi`，子级使用`v-if`

2.`v-hasPermi`的原理是在元素加载完成后，判断用户无权限时，把加了权限判断的元素移除，所以<i>v-hasPermi</i>只能加在可以编译为DOM的元素上，不能加在template上