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

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

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

在实际开发中,经常需要对表格数据进行筛选和排序。如果表格数据太多,可能会导致页面加载缓慢,影响用户体验。因此,我们可以通过隐藏一些不必要的来优化页面性能。 在element-ui的表格组件中,我们可以通过设置column的属性“visible”来控制的显示和隐藏。对于需要隐藏,我们只需要将其对应的column的visible属性设置为false即可,元素将不会被渲染出来,从而达到了隐藏的效果。具体实现步骤如下: 1.在表头中定义需要隐藏的column,例如name: ``` <el-table-column prop="name" label="姓名" :visible="false"></el-table-column> ``` 2.在表格数据中去掉对应的name字段 ``` [{ age: 28, sex: '男' }, { age: 25, sex: '女' }] ``` 这样,在页面中,name就不会被渲染出来。 另外,在实际开发中,有时候需要在特定的情况下显示隐藏,这时我们可以使用表格的scoped slot来实现。具体实现步骤如下: 1.在表头中定义需要隐藏的column,例如name: ``` <el-table-column prop="name" label="姓名" :visible="false"></el-table-column> ``` 2.在表格组件中定义一个scoped slot,以slot-scope="{ column, $index }"来获取当前和当前行的索引值,然后根据需要显示隐藏 ``` <el-table :data="tableData" style="width: 100%"> <template slot-scope="{ column, $index }"> <el-table-column v-if="column.label == '姓名'" prop="name" label="姓名" :key="$index" :visible="true"> </el-table-column> <el-table-column v-else :prop="column.prop" :label="column.label" :key="$index" :visible="column.visible"> </el-table-column> </template> </el-table> ``` 这样,在页面中,我们就可以通过控制visible属性来动态显示隐藏了。 总的来说,element-ui的表格组件非常灵活且功能强大,通过控制column的visible属性,可以轻松实现表格隐藏。同时,通过使用scoped slot,还可以实现动态显示隐藏,方便开发者按需加载表格数据
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

郑清

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

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

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

打赏作者

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

抵扣说明:

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

余额充值