根据权限不同展示不同的表格表头

首先来说一下我的需求，根据超级管理员、管理员、编辑、用户等来展示不同的表格，以下是不同的写法

1.第一种就是v-if的写法

 <el-table :data="tableList" border>
        <el-table-column
            label="管理员"  
            prop="superAdmin" 
            v-if="showAdmin">
        </el-table-column>
        <el-table-column label="编辑" prop="editName" v-if="showManager"></el-table-column>
        <el-table-column label="用户" prop="userName"></el-table-column>
   </el-table>
   
   

    computed:{
        showAdmin(){
            let indexTable =[ "super" ,"admin"];
            return indexTable.includes(this.type);
        },
        showManager() {
          let indexTable = ["admin"];
          return indexTable.includes(this.type);
        },
    }

2.第二种是维护一个全部表格列数组，数组中每个字段有自己的权限数组，根据用户权限返回一个新的表格数组，循环新的表格列表

//1.直接操作dom
<template  v-for="item in tableColumn">
 <el-table-column
          :key="item.props"
          :prop="item.props"
          :label="item.name"
          align="center"
          v-if="item.orgType.includes(orgType)"
        ></el-table-column>
</template>

// 2.维护一个新的表格数组根据权限返回 
<el-table-column
    :key="item.props"
    v-for="item in newTableColumn"
    :prop="item.props"
    :label="item.name"
    align="center">
</el-table-column>
        
//`在computed中维护`
showTableColumn() {
   if (!this.orgType) {
      return this.tableColumn;
   }
   return this.tableColumn.filter((item) => {
       return item.orgType.indexOf(this.orgType) != -1;
   });
},

    

 tableColumn: [
        { name: "管理员", props: "admin", orgType: ["superAdmin"] },
        {
          name: "编辑",
          props: "editName",
          orgType: ["superAdmin", "admin"],
        },
        {
          name: "用户",
          props: "userName",
          orgType: ["superAdmin", "admin" "eidt"],
        },
       ...
      ],

3.维护一个map，根据type选择展示的数据

 <el-table-column
     :key="item.props"
     v-for="item in columnListMap[orgType]"
     :prop="item.props"
     :label="item.name"
     align="center">
 </el-table-column>
 
 
 // data
 columnListMap:{
     superAdmin:[
        {name:"管理员" ,prop:"adminName"},
        {name:"编辑" ,prop:"editName"},
        {name:"用户" ,prop:"userName"},
     ],
     admin:[
         {name:"编辑" ,prop:"editName"},
         {name:"用户" ,prop:"userName"},
     ],
     edit:[
         {name:"用户" ,prop:"userName"},
     ],
}