近期要實(shí)現(xiàn)一個(gè)el-table的表頭自定義功能，可以根據(jù)復(fù)選框的選中或者不選實(shí)現(xiàn)表格列的顯示隱藏，自定義展示表格列表，通過(guò)網(wǎng)上的一些例子來(lái)實(shí)現(xiàn)了一下。
實(shí)現(xiàn)的效果如下：

WechatIMG15.jpeg

WechatIMG14.jpeg

代碼如下：
1. table表格部分

<el-table
     border
     :data="list"
     stripe
     max-height="460"
   >
    <af-table-column
      type="selection"
      fixed
      width="55">
    </af-table-column>
     <af-table-column
       v-for="(item,index) in tableHeader"
       v-if="colData[index].istrue"
       :key="item.key"
       show-overflow-tooltip
       :label="item.label"
       :header-align = "headFormat"
       :resizable = "resizable"
     >
     <template slot-scope="scope">
       {{scope.row[item.key]}}
     </template>
     </af-table-column>
   </el-table>

2.數(shù)據(jù)部分

data () {
  return {
      list: [
        {
          id: '上海市普陀',
          zbh: '上海市普陀',
          kind: '上海市普',
          qd: '上海市普',
          user: '上海市普',
          id1: '1上海市普',
        }
      ],
      colOptions: ['上海市普', '上海市普22', '核心存款時(shí)點(diǎn)', '所屬機(jī)構(gòu)編號(hào)1'], // 多選框的選擇項(xiàng)
      colSelect: ['上海市普', '上海市普22', '核心存款時(shí)點(diǎn)', '所屬機(jī)構(gòu)編號(hào)1'], // 多選框已選擇的內(nèi)容，即表格中顯示的列
      // istrue屬性存放列的狀態(tài)
      colData: [
        { title: '上海市普', istrue: true },
        { title: '上海市普22', istrue: true },
        { title: '核心存款時(shí)點(diǎn)', istrue: true },
        { title: '所屬機(jī)構(gòu)編號(hào)1', istrue: true }
      ],
      tableHeader: [
        { label: '上海市普', key: 'zbh' },
        { label: '上海市普22', key: 'kind' },
        { label: '核心存款時(shí)點(diǎn)', key: 'qd' },
        { label: '所屬機(jī)構(gòu)編號(hào)1', key: 'id1' }
      ]
  }
}

3.方法

watch: {
    colOptions(newVal, oldVal) {
      if (newVal) { // 如果有值發(fā)生變化，即多選框的已選項(xiàng)變化
        var arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) // 未選中
        this.colData.filter(i => {
          if (arr.indexOf(i.title) !== -1) {
            i.istrue = false
          } else {
            i.istrue = true
          }
        })
      }
    }
  }