(iview)根據權限table表格控制columns 的某列顯示與隱藏（通用）

  iview根據權限table表格控制columns 的某列顯示與隱藏（通用）

先給一個UI設計圖：

 

1.需求描述

根據權限控制某列中顯示與隱藏

2.使用場景

根據不同用戶（普通用戶，vip用戶），展示對應的列

3.解決思路

將原來的columns copy一份，然後根據權限去讓它過濾對應的列，就能返回最新的columns了

舉個例子，代碼如下

created() {
    userType(type) {
      // type: 1 普通用戶   2 vip用戶  如果是普通用戶則不能看到 couponAbleNum 這一列。
      if (type == '1') { //此處判斷不用用戶類型是否有有對應的列權限
        this.columns = this.columns.filter(col => col.type !== 'couponAbleNum' )
      } else {
        this.columns = this.columnsCopy
      }
    }
  }

根據條件讓：列1顯示的時候列2隱藏，或者列2顯示，列1隱藏；

做法如下：

//過濾掉，TCC 分區一列不顯示，sc線路一列不顯示
            handleColumns(){
                // console.log("historyColumns:",this.historyColumns);
                let userType = this.$store.state.user.serverNodeId.substring(4,8);
                // console.log("userType",userType);
                if( userType !== "ZZZZ"){
                    this.historyColumns = this.historyColumns.filter(col => col.key !== 'lineName' );
                }else{
                    this.historyColumns = this.historyColumns.filter(col => col.key !== 'areaName' )
                }
            }

mounted(){
 
          this.handleColumns();//過濾哪列隱藏
},

完工：