若依权限v-hasPermi

在写项目中，发现v-hasPermi只能隐藏按钮，像一些标签是不能隐藏的，比如说el-table中的el-table-column
如下图所示：

image.png

有两种方法：

方法一

要想进行标签的权限隐藏，可以配合v-if进行

this.$auth.hasPermi('production:semi:registeExport')
 
//既然拿到了判断权限的标识钥匙，那接下来就好办了
 <el-table-column
        label="操作"
        align="center"
        //直接在标签上使用v-if来进行判断是否开启权限，即可实现标签的权限隐藏
        v-if="$auth.hasPermi('production:semi:registeExport')"
        width="200"
      >
 </el-table-column>

总结：关键 this.$auth.hasPermi('production:semi:registeExport') 这行代码可以判断是否是开启权限，再配合v-if进行标签的权限隐藏即可。

方法二

拿到设置的所有权限，根据字段去判断是否包含其中

// 获取权限
    hasPermi(permission) {
      let userPermissions = this.$store.getters.permissions
      return userPermissions.includes(permission) || userPermissions.includes('*:*:*');
    },
<el-table-column
          label="操作"
          align="center"
          width="120"
          class-name="small-padding fixed-width"
          fixed="right"
          v-if="hasPermi('production:semi:registeExport')"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              v-hasPermi="['production:semi:registeExport']"
              @click="handleUpdate(scope.row)"
              >修改xxx
            </el-button>
          </template>
        </el-table-column>