vue?elementUI表格控制怎么顯示隱藏對應列

這篇文章主要介紹“vue elementUI表格控制怎么顯示隱藏對應列”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue elementUI表格控制怎么顯示隱藏對應列”文章能幫助大家解決問題。

需求：后端返回全部列數(shù)據(jù)。前端根據(jù)選項來顯示對應的列，如果不勾選，默認全部隱藏。

效果圖

勾選后顯示對應的列

上代碼

html部分

這里用v-if來顯示隱藏，因為這個elementul組件的原因，v-show不生效，要用v-if

<el-table-column
        v-if="lists[0].ispass"
          label="Upper"
          prop="db28"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        v-if="lists[1].ispass"
          label="Lower"
          prop="db31"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        v-if="lists[2].ispass"
          label="UP+LOW"
          prop="db34"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        v-if="lists[3].ispass"
          label="Static"
          prop="db36"
          key="1"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        v-if="lists[4].ispass"
          label="LRO-T1 OA"
          min-width="90px"
          prop="db44"
          key="2"
          show-overflow-tooltip
        >
</el-table-column>

data部分

ispass是用來控制顯示或隱藏的，label是用來判斷的。

lists:[
          {label:'Upper',ispass:false},
          {label:'Lower',ispass:false},
          {label:'UP+LO',ispass:false},
          {label:'Static',ispass:false},
          {label:'LRO-T1 OA',ispass:false},
          {label:'LRO-T2 OA',ispass:false},
          {label:'LRO-B1 OA',ispass:false},
          {label:'LRO-B2 OA',ispass:false},
          {label:'RRO-C OA',ispass:false},
          {label:'LRO-T1 Buige',ispass:false},
          {label:'LRO-T2 Buige',ispass:false},
          {label:'LRO-B1 Buige',ispass:false},
          {label:'LRO-B2 Buige',ispass:false},
          {label:'LRO-T1 Dent',ispass:false},
          {label:'LRO-T2 Dent',ispass:false},
          {label:'LRO-B1 Dent',ispass:false},
          {label:'LRO-B2 Dent',ispass:false},
        ],
        check:[
        "Upper",
        "Lower",
        "UP+LO",
        "Static",
        "LRO-T1 OA",
        "LRO-T2 OA",
        "LRO-B1 OA",
        "LRO-B2 OA",
        "RRO-C OA",
        "LRO-T1 Buige",
        "LRO-T2 Buige",
        "LRO-B1 Buige",
        "LRO-B2 Buige",
        "LRO-T1 Dent",
        "LRO-T2 Dent",
        "LRO-B1 Dent",
        "LRO-B2 Dent",
      ],
      checkList: [
      ],

方法部分

直接用watch監(jiān)聽，復制就行。這里注意checkList和check
checkList：代表你多選框的默認選中，我沒寫就是默認全不選
check：這個也要寫和lists里的label一樣，用來判斷的。

watch:{
      checkList(newVal){
            if (newVal) {
              var arr = this.check.filter(i => newVal.indexOf(i) < 0) //未選中
              this.lists.map(i => {
                if (arr.indexOf(i.label) !== -1) {
                  i.ispass = false
                } else {
                  i.ispass = true
                }
              })
            }
      }
    },

關于“vue elementUI表格控制怎么顯示隱藏對應列”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。