elementUI el-table的动态显示列组件

最近公司有一个需求是,由于列数过多,所以想要根据某个按钮控制列的显示和隐藏,以达到方便阅览的效果~附上代码如下

(1)这个是控制列的显示与否的弹框,里面展示出列的表头label,通过复选框勾选,如果勾选上则代表要展示,如果不勾选代表隐藏

<el-popover placement="right" :title='$t("button.columnFilter")' trigger="click">
    <el-checkbox-group v-model="checkList" @change="filter" style="width:700px;display:flex;justify:space-between;flex-direction:row;flex-wrap:wrap">
        <el-tooltip v-for="(item, index) in colLists" :key="index" effect="dark" :content="item.label" placement="top">
            <el-checkbox :label="item.label" style="width:23%;overflow:hidden;white-space: nowrap;margin-right:10px"></el-checkbox>
        </el-tooltip>
    </el-checkbox-group>
    <el-button type="button" size="small" slot="reference" style="width:32px;height:32px;border-color:#D3362F"><i class="el-icon-arrow-down el-icon-menu" style="font-size:16px;color:#D3362F"></i></el-button>
</el-popover>

(2)列表展示

注意哦,要在循环遍历的el-table-column外面套上一层template进行循环,不然你直接在el-table-column上写循环并且写v-if/v-show是不起作用的 写v-if还会报错的

<el-table :data="tableData" :row-key="getRowKeys" ref="multipleTable" @selection-change="handleSelectionChange" @select="select" @select-all="selectAll" v-loading="loading" size="mini" @sort-change="sortChange" max-height="500" border stripe>
    <el-table-column type="selection" width="55" fixed></el-table-column>
    <template v-for="(item,index) in colLists">
        <el-table-column show-overflow-tooltip :key="`col_${index}`" sortable="custom" :prop="item.prop" :label='item.label' :width="item.width" v-if="item.isTrue"></el-table-column>
    </template>
</el-table>

 colLists里面的isTrue是控制列的显示与否的

      colLists: [
        {
          prop: "aaa",
          label: this.$t("forcast.aaa"),
          isTrue: true,
          width: 100
        },
        {
          prop: "bbb",
          label: this.$t("forcast.bbb"),
          isTrue: true,
          width: 140
        },
        {
          prop: "ccc",
          label: this.$t("forcast.ccc"),
          isTrue: true,
          width: 140
        },
        {
          prop: "ddd",
          label: this.$t("accountStatement.ddd"),
          isTrue: true,
          width: 195
        },
        {
          prop: "eee",
          label: this.$t("accountStatement.eee"),
          isTrue: true,
          width: 160
        },
        {
          prop: "fff",
          label: this.$t("asn.fff"),
          isTrue: true,
          width: 120
        },
        ...............
        {
          prop: "zzz",
          label: this.$t("system.zzz"),
          isTrue: true,
          width: 160
        },
      ],

(3)

  mounted() {
    this.colLists.forEach((item, index) => {
      this.checkList.push(item.label)
    })
  },

(4)这一步也要注意哦,如果你不加这段代码,

//在数据加载完，重新渲染表格

this.$nextTick(() => {
        this.$refs['multipleTable'].doLayout();
})

会出现当你隐藏某列再显示某列时,表格表头突然下坠的问题;

如下图:

 

    filter(val) {
      this.list = []
      this.colLists.forEach((item, index) => {
        this.list.push(item.label)
      })
      // 未选中的不展示
      this.result = this.list.filter(number => !val.includes(number))
      if (this.result.length >= 1) {
        this.result.forEach((item, index) => {
          this.colLists.forEach((items, indexs) => {
            if (items.label == item) {
              items.isTrue = false
            }
          })
        })
      }
      // 选中的数据继续展示
      val.forEach((item, index) => {
        this.colLists.forEach((items, indexs) => {
          if (items.label == item) {
            items.isTrue = true
          }
        })
      })
      console.log('最终this.colLists', this.colLists);
      this.$nextTick(() => { //在数据加载完，重新渲染表格
        this.$refs['multipleTable'].doLayout();
      })
    },