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、后端响应的表格列数据格式

动态列字段:
在这里插入图片描述

表格列数据:
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郑清

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值