Element(5) 动态显示隐藏筛选表格列数据

一、前言

本文将实现element的动态显示隐藏筛选表格列数据，功能很简单，这里简单的记录一下，效果图如下：

二、功能实现

主要使用element的 多选框组checkbox-group + popover弹出框 来实现

1. checkbox-group: https://element.eleme.cn/2.10/#/zh-CN/component/checkbox
2. popover弹出框: https://element.eleme.cn/2.10/#/zh-CN/component/popover

三、代码部分

温馨小提示：个人实现代码仅供参考，建议多看下element官网提供的资料来实现~

1、列筛选弹出框

<el-popover
  placement="right"
  title="列筛选"
  trigger="click"
>
  <el-checkbox-group v-model="factorNames" @change="handleColumnFilter">
    <el-checkbox v-for="item in factorNameColumnList" :key="item" :label="item">{{ item.factorName }}</el-checkbox>
  </el-checkbox-group>
  <el-button slot="reference"><i class="el-icon-arrow-down el-icon-menu" />监测因子</el-button>
</el-popover>

2、表格数据

<el-table :data="list" border>
  <!-- 写死的固定字段 -->
  <el-table-column label="xx" prop="xx" align="center" />
  <!-- 活的，从后端动态获取的字段 -->
  <template v-for="(col,i) in factorNames">
    <el-table-column :label="col.factorName" align="center">
      <template slot-scope="scope">
        {{ scope.row.factorList[i].monitorValue }}
      </template>
    </el-table-column>
  </template>
</el-table>

3、JS

export default {
  name: 'App',
  data() {
    return {
      list: [],
      factorNames: [], // 用于显示的列
      factorNameColumnList: [], // 监测因子所有列-用于可选择的列
      listLoading: true
    }
  },
  created() {
    this.getList() // 获取表格数据
    this.getFactorTypeList() // 动态获取表格列
  },
  methods: {
    getList() {
      this.listLoading = true
      getDataList({}).then(response => {
        this.list = response.data.records
        this.listLoading = false
      })
    },
    getFactorTypeList() {
      getFactorList({ 'type': 2 }).then(response => {
        this.factorNames = response.data.map(item => {
          return { factorId: item.factorId, factorName: item.name }
        })
        this.factorNameColumnList = this.factorNames
      })
    },
    // 列过滤
    handleColumnFilter(val) {
      this.factorNames = val
    }
  }
}
</script>

4、部分代码解释

1. el-checkbox-group 绑定的factorNames值为所显示的动态的列
2. el-checkbox 循环的factorNameColumnList数据为所要筛选的列

5、后端响应的表格列数据格式

动态列字段：

表格列数据：