vue中动态控制表格列的显示与隐藏 （优化版本，便于后期维护与修改）
这边是没优化之前的代码，表格部分代码量稍微有点多，写法有点繁琐
element-ui部分
header-contextmenu是element-ui提供的方法，点击表头时触发
<template>
<el-table
:data="list"
border
fit
@header-contextmenu="contextmenu"
>
// prop:字段名 label：表头单元格内容
<el-table-column v-if="colData[0].istrue" prop="a" label="A" align="center" />
<el-table-column v-if="colData[1].istrue" prop="b" label="B" align="center" />
<el-table-column v-if="colData[2].istrue" prop="c" label="C" align="center" />
<el-table-column v-if="colData[3].istrue" prop="d" label="D" align="center" />
<el-table-column v-if="colData[4].istrue" prop="e" label="E" align="center" />
el-table>
<div v-show="menuVisible" :style="{
top:top+ ";px";,left:left+ ";px";}" class="menu1">
<el-checkbox-group v-model="colOptions"> // colOptions：右击菜单内容
<el-checkbox v-for="item in colSelect" :key="item" :label="item" />
el-checkbox-group>
div>
template>
在watch里监听true或者false的变化
<script>
export default {
name: 'Ledger',
data() {
return {
list: null,
menuVisible: false,
top: 0,
left: 0,
// colOptions，colSelect中内容的顺序必须与表格中表头的内容顺序保持一致
colOptions: ['A', 'B', 'C', 'D', 'E'],
colSelect: ['A', 'B', 'C', 'D', 'E'],
colData: [
{
title: 'A', istrue: true }, // true：初始化表格时显示这个表头列，false：不显示
{
title: 'B', istrue: true },
{
title: 'C', istrue: true },
{
title: 'D', istrue: true },
{
title: 'E', istrue: true }
]
}
},
watch: {
colOptions(valArr) {
var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0) // 未选中
this.colData.filter(i => {
if (arr.indexOf(i.title) !== -1) {
i.istrue = false
} else {
i.istrue = true
}
})
}
},
created() {
},
methods: {
contextmenu(row, event) {
this.menuVisible = false // 先把右键菜单关死
this.menuVisible = true // 显示自定义菜单
window.event.returnValue = false // 取消浏览器右击默认事件
document.addEventListener('click', this.foo)
// 获取鼠标点坐标，设置右击菜单位置
this.top = event.clientY
this.left = event.clientX
},
foo() {
this.menuVisible = false // 关闭右键菜单
document.removeEventListener('click', this.foo) // 取消监听事件
}
}
}
</script>
style{
.menu1{
position:fixed;
height:auto;
width:231px;
border-radius: 3px;
border: 1px solid #999999;
background-color: #f4f4f4;
padding: 10px;
z-index: 1000
}
.el-checkbox{
display:block;
height:20px;
line-height:20px;
padding:0 5px;
margin-right:0;
font-size:12px;
border: 1px solid transparent;
}
.el-checkbox:hover{
border-radius: 3px;
border: 1px solid #999999;
}
}
- 上面这种方法略显繁琐，如果要在表格中添加某一列，要修改的地方会比较多，所以我给优化了一下
- 优化之后，要添加列或者调整列的顺序只需要改data里面的内容，不需要在html里一个一个修改index的值了
- 在data中初始化表头数组，表格部分添加v-if判断，改动代码如下（只需要改这些地方，其他内容不需要修改）
- html部分
<el-table
:data="list" border fit
@header-contextmenu="contextmenu"
>
<el-table-column
label="序号"
prop="id"
align="center"
width="80"
>
<template slot-scope="scope">
<span>{
{ scope.$index+1+(listQuery._page)*listQuery._page_size }}span>
template>
el-table-column>
<el-table-column
v-for="(item,index) in tableHeader"
v-if="colData[index].istrue"
:key="item.key"
:label="item.label"
:min-width="item.width"
align="center"
show-overflow-tooltip
>
<template slot-scope="scope">
<span>{
{ scope.row[item.key] }}span>
template>
el-table-column>
el-table>
- javascript部分，添加一下表头就可以了，其余地方不用改
data() {
return {
// label:表头的字段名 key: 字段对应的属性名
tableHeader: [
{
label: 'A', key: 'a' },
{
label: 'B', key: 'b' },
{
label: 'C', key: 'c' },
{
label: 'D', key: 'd', width: '150px' },
{
label: 'E', key: 'e' }
]
}
},