el-table控制列的显示与隐藏

最新推荐文章于 2024-08-20 16:20:23 发布

平仄平平仄仄

最新推荐文章于 2024-08-20 16:20:23 发布

阅读量357

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/skywms/article/details/133047252

版权

文章介绍了如何在Vue项目中使用ElementUI组件实现表格的列隐藏功能，通过`ElPopover`和`el-table-column`配合，以及利用Vue的数据绑定和方法处理，实现实时列显示状态的切换和全选/反选功能。

摘要由CSDN通过智能技术生成

1、序言
源码在下方，复制粘贴就可运行

当一个表格太多列的时候，想要显示/隐藏一些列，目标效果如下：

默认情况下，展示所有列

隐藏某一列

2、源码
这是组件，引用并注册该组件便可使用了

<template>
<div>
<el-popover placement="left" trigger="hover" class="popover" @show="showPopover">
<div style="display: flex; justify-content: space-between;align-items: center;">
<el-checkbox v-model="checkAll" @change="checkAllChangeFn">列展示</el-checkbox>
<el-button type="text" @click="reset(true)">重置</el-button>
</div>
<el-divider></el-divider>
<el-checkbox-group v-model="checkColumns" @change="changeColumns">
<el-checkbox v-for="(item, key) in columns" :label="item.label"></el-checkbox>
</el-checkbox-group>
<i class="el-icon-s-tools" slot="reference"></i>
</el-popover>

<el-table ref="table" id="table" :data="tableData" border style="width: 100%; margin: 20px 0;">
<template v-for="item in columns">
<el-table-column v-if="showColumn(item.prop)" :prop="item.prop" :label="item.label"></el-table-column>
</template>
</el-table>
</div>
</template>

<script>

export default {
name: 'App',
data() {
return {
tableData: [{
date: '2016-05-01',
name: '王小虎',
age: 13,
money: 100
}, {
date: '2016-05-02',
name: '王小虎',
age: 25,
money: 333
}, {
date: '2016-05-03',
name: '王小虎',
age: 33,
money: 555
}, {
date: '2016-05-04',
name: '王小虎',
age: 23,
money: 200
},
{
date: '2016-05-05',
name: '王小虎',
age: 26,
money: 666
}],
columns: [
{ label: '日期', prop: 'date', isShow: true },
{ label: '姓名', prop: 'name', isShow: true },
{ label: '年龄', prop: 'age', isShow: true },
{ label: '财产', prop: 'money', isShow: true },
],
checkColumns: [],
checkAll: false,
}
},
methods: {
// 全选复选框事件监听
checkAllChangeFn(val) {
if (val) {
// 全选
this.reset(true);
} else {
// 反全选
this.reset(false);
}
},
// 重置，flag: Boolean，全部重置为flag
reset(flag) {
this.columns.forEach(item => {
item.isShow = flag;
})
this.showPopover();
this.refreshTable();
},
// 表格列是否显示的方法
showColumn(currentColumn) {
return this.columns.find(item => item.prop == currentColumn).isShow;
},
/* 选择列 */
changeColumns(val) {
this.columns.forEach(item => {
item.isShow = false;
})
// columns将val数组存在的值设为true，不存在的设为false
val?.forEach(item => {
let current = this.columns.find(i => i.label == item)
current.isShow = true;
})
// 判断是否全选
this.judgeIsCheckAll();
this.refreshTable();
},
// 重新渲染表格
refreshTable() {
this.$nextTick(() => {
this.$refs.table.doLayout();
})
},
// 气泡框出现
showPopover() {
this.checkColumns = []
this.columns.forEach(item => {
if (item.isShow) {
this.checkColumns.push(item.label)
}
})
// 判断是否全选
this.judgeIsCheckAll();
},
// 判断是否全选
judgeIsCheckAll() {
// 选中的长度 = 表格列的长度全选按钮就选中
if (this.checkColumns.length == this.columns.length)
this.checkAll = true
else
this.checkAll = false
}
}
}
</script>

<style scoped>
/* 分割线 */
.el-divider {
margin: 10px 0;
}

/* 复选框 */
.el-checkbox-group {
display: flex;
flex-direction: column;
}

/* 操作列图标位置 */
.popover {
display: flex;
justify-content: flex-end;
font-size: 30px;
}
</style>