使用Element ui Table組件動(dòng)態(tài)控制列的顯示隱藏方式

更新時(shí)間：2025年06月11日 14:17:49 作者：&活在當(dāng)下&

這篇文章主要介紹了使用Element ui Table組件動(dòng)態(tài)控制列的顯示隱藏方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Element ui Table組件動(dòng)態(tài)控制列的顯示隱藏

最近遇到一個(gè)需求，要求可以動(dòng)態(tài)控制 table 列表中的列的顯示與隱藏，并且將選中的列進(jìn)行存儲(chǔ)，下次進(jìn)入頁面仍展示上次勾選的列。

經(jīng)過查閱資料，實(shí)現(xiàn)了這個(gè)功能，創(chuàng)建一個(gè)Table.vue文件

組件封裝代碼

如下所示：

<template>
  <div>
    <el-table
      ref="dataTable"
      :data="tableData"
      header-cell-class-name="headerCell"
      cell-class-name="contentCell"
      fit
      border
      lazy
      size="mini"
    >
      <!-- 索引列 -->
      <el-table-column type="index" width="50" />
      <!-- 描述和操作列 -->
      <template v-for="(item, index) in tableHead">
        <el-table-column
          v-if="tableHead[index].isShow"
          :key="index"
          :prop="item.columnName"
          :label="item.columnTitle"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{scope.row[item.columnName]}}</div>
          </template>
        </el-table-column>
      </template>
      <!-- 切換顯示隱藏列 -->
      <el-table-column  width="40">
        <template slot="header" slot-scope="scope">
          <a href="javascript:;" rel="external nofollow" >
            <el-popover :ref="`popover-${scope.$index}`" width="150" placement="left" trigger="click">
              <el-checkbox-group v-model="columnSelecteds">
                <el-checkbox
                  v-for="item in tableHead"
                  v-show="item.columnTitle"
                  :key="item.columnTitle"
                  :label="item.columnTitle"
                />
              </el-checkbox-group>
              <i slot="reference" class="el-icon-s-grid" />
            </el-popover>
          </a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    tableHead: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      columnSelecteds: [] // 已選擇的項(xiàng)
    }
  },
  watch: {
    /* @title 監(jiān)聽列顯示隱藏**/
    columnSelecteds(newArrayVal) {
      // 計(jì)算為被選中的列標(biāo)題數(shù)組
      var nonSelecteds = this.tableHead
      .filter((item) => newArrayVal.indexOf(item.columnTitle) === -1)
      .map((item) => item.columnTitle)
      // 根據(jù)計(jì)算結(jié)果進(jìn)行表格重繪
      this.tableHead.filter((item) => {
        const isNonSelected = nonSelecteds.indexOf(item.columnTitle) !== -1
        if (isNonSelected) {
          // 隱藏未選中的列
          item.isShow = false
          this.$nextTick(() => {
            this.$refs.dataTable.doLayout()
          })
        } else {
          // 顯示已選中的列
          item.isShow = true
          this.$nextTick(() => {
            this.$refs.dataTable.doLayout()
          })
        }
      })
      localStorage.setItem('columnSelecteds', JSON.stringify(newArrayVal))
    }
  },
  created() {
    // 初始化要顯示的列
    if (JSON.parse(localStorage.getItem('columnSelecteds')) && JSON.parse(localStorage.getItem('columnSelecteds')).length) {
      this.columnSelecteds = JSON.parse(localStorage.getItem('columnSelecteds'))
    } else {
      this.tableHead.forEach((item) => {
        if (item.isShow) {
          this.columnSelecteds.push(item.columnTitle)
        }
      })
      localStorage.setItem('columnSelecteds', JSON.stringify(this.columnSelecteds))
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .headerCell {
  padding: 5px 0;
  background: #f5f7fa;
  color: #606266;
}
::v-deep .contentCell {
  padding: 5px 0;
  text-align: center;
}
::v-deep .el-table .cell{
  white-space: nowrap;
}
.el-checkbox:last-of-type{
  margin-right: 30px;
}
</style>

組件用法

如下所示：

新建一個(gè)index.vue，將Table組件引入使用：

<template>
  <div>
    <Table
      :table-data="tableData"
      :table-head="tableHead"
    />
  </div>
</template>

<script>
import Table from './components/Table'
export default {
  components: {
    Table,
  },
  data() {
    return {
      // 表頭數(shù)據(jù)
      tableHead: [{
        'columnName': 'name',
        'columnTitle': '姓名',
        'isShow': true
      }, {
        'columnName': 'date',
        'columnTitle': '日期',
        'isShow': false
      }, {
        'columnName': 'address',
        'columnTitle': '地址',
        'isShow': true
      }],
      // 表格數(shù)據(jù)
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }]
    }
  }
}
</script>