vue实现动态控制el-table表格列的展示与隐藏
作者:zhougl996 时间:2024-05-05 09:07:26
本文实例为大家分享了vue动态控制el-table表格列的展示与隐藏的具体代码,供大家参考,具体内容如下
1.引入el-table组件,这里我直接用官网的示例代码
<template>
? ? <div class="page">
? ? ? ? <el-popover width="60" trigger="click">
? ? ? ? ? ? <el-checkbox-group v-model="columnSelecteds">
? ? ? ? ? ? ? ? <el-checkbox v-for="item in columnHeaders" :label="item.title" :key="item.title" ></el-checkbox> ? ?
? ? ? ? ? ? </el-checkbox-group>
? ? ? ? ? ? <el-button slot="reference" icon="el-icon-more" circle style="margin-left: 100px;"></el-button>
? ? ? ? </el-popover>
? ? ? ? <el-table
? ? ? ? ? ? :data="tableData"
? ? ? ? ? ? ref="dataTable"
? ? ? ? ? ? stripe
? ? ? ? ? ? style="width: 100%">
? ? ? ? ? ? <el-table-column v-if="columnHeaders[0].isShow" prop="date" label="日期"></el-table-column>
? ? ? ? ? ? <el-table-column v-if="columnHeaders[1].isShow" prop="name" label="姓名"></el-table-column>
? ? ? ? ? ? <el-table-column v-if="columnHeaders[2].isShow" prop="address" label="地址"></el-table-column>
? ? ? ? </el-table>
? ? </div>
</template>
页面效果图:
2.数据绑定与监听
<script>
export default {
? ? name: 'ElTableTest',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? // 表格数据
? ? ? ? ? ? tableData: [{
? ? ? ? ? ? ? ? date: '2016-05-02',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀区金沙江路 1518 弄'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? date: '2016-05-04',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀区金沙江路 1517 弄'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? date: '2016-05-01',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀区金沙江路 1519 弄'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? date: '2016-05-03',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀区金沙江路 1516 弄'
? ? ? ? ? ? }],
? ? ? ? ? ? //表头信息
? ? ? ? ? ? columnHeaders: [?
? ? ? ? ? ? ? ? {index: 0, title: "日期", isShow: true},
? ? ? ? ? ? ? ? {index: 1, title: "姓名", isShow: true},
? ? ? ? ? ? ? ? {index: 2, title: "地址", isShow: true}
? ? ? ? ? ? ], ?
? ? ? ? ? ? //已选择的项
? ? ? ? ? ? columnSelecteds: ["日期","姓名", "地址"]?
? ? ? ? } ??
? ? },
? ? watch: {
? ? ? ? /**
? ? ? ? ?* @title 监听列显示隐藏
? ? ? ? ?*/
? ? ? ? columnSelecteds(newArrayVal) {
? ? ? ? ? ? // 计算为被选中的列标题数组
? ? ? ? ? ? var nonSelecteds = this.columnHeaders
? ? ? ? ? ? ? ? ? ? ? ? .filter(item => newArrayVal.indexOf(item.title) == -1)?
? ? ? ? ? ? ? ? ? ? ? ? .map(item => item.title)
? ? ? ? ? ? // 根据计算结果进行表格重绘
? ? ? ? ? ? this.columnHeaders.filter(item => {
? ? ? ? ? ? ? ? let isNonSelected = nonSelecteds.indexOf(item.title) != -1
? ? ? ? ? ? ? ? if (isNonSelected) {
? ? ? ? ? ? ? ? ? ? // 隐藏未选中的列
? ? ? ? ? ? ? ? ? ? item.isShow = false
? ? ? ? ? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? ? ? ? ? ? this.$refs.dataTable.doLayout()
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 显示已选中的列
? ? ? ? ? ? ? ? ? ? item.isShow = true
? ? ? ? ? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? ? ? ? ? ? this.$refs.dataTable.doLayout()
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? }
}
</script>
监听到已选择和未选择的列,调用doLayout()方法对表格进行重绘。
最终效果:
来源:https://blog.csdn.net/Aoutlaw/article/details/120459076
标签:vue,展示,隐藏
0
投稿
猜你喜欢
详解爬虫被封的问题
2021-01-29 15:21:16
Python开发常用五种循环方式的场景性能比较
2021-11-19 13:24:00
自动生成文章摘要的代码[JavaScript 版本]
2024-04-30 09:52:16
Python实现检测服务器是否可以ping通的2种方法
2023-06-07 20:18:14
Sql 语句学习指南第1/2页
2024-01-25 07:13:01
网页中空格的烦恼
2011-04-28 09:26:00
python实现视频读取和转化图片
2023-09-25 08:23:22
微信小程序 列表的上拉加载和下拉刷新的实现
2024-05-11 09:34:32
sql server中datetime字段去除时间的语句
2024-01-23 17:47:57
通过PYTHON来实现图像分割详解
2023-12-08 16:02:46
基于Python组装jmx并调用JMeter实现压力测试
2023-05-03 04:42:20
Python实现图的广度和深度优先路径搜索算法
2021-09-14 23:50:19
selenium + python 获取table数据的示例讲解
2021-02-20 11:57:46
对Python 语音识别框架详解
2023-09-22 01:32:30
js使用eval解析json(js中使用json)
2024-04-19 10:00:31
python图片指定区域替换img.paste函数的使用
2023-10-17 02:34:01
Python3 Post登录并且保存cookie登录其他页面的方法
2023-08-18 22:45:52
PyQt5每天必学之单行文本框
2022-09-12 06:29:35
6个asp判断函数使用方法介绍
2007-09-24 13:10:00
如何真正的了解python装饰器
2023-03-16 09:08:23