datagrivew删除列_vue iview 隐藏Table组件里的某一列操作

1、假设我要隐藏columns里的 “账户组名称”

columns: [

{

type: 'selection',

width: 60,

align: 'center'

},

{

title: '账号ID',

key: 'accountIdString'

},

{

title: '账号名称',

key: 'accountName'

},

{

title: '账户组名称',

key: 'accountGroupName'

}]

2、根据各自需求去判断

示例：如果是单账户表标题显示"账号ID、账号名称" 如果是账户组表标题显示"账户组名称"

if(this.queryCostComparisonData[i].accountGroupName){

this.columns = this.columns.filter(col => col.key !== 'accountIdString' );

this.columns = this.columns.filter(col => col.key !== 'accountName' );

}else{

this.columns = this.columns.filter(col => col.key !== 'accountGroupName' );

}

补充知识：vue——动态控制表格列的显示和隐藏

如下所示：

如图，为要实现的需求，即右键table的表头弹出菜单栏，通过勾选多选框的内容来控制表格列的显示和隐藏。

1. HTML部分(elemen-ui)：

(1) 通过v-if="colData[0].istrue"，来判断表格列的状态

(2) @header-contextmenu是element-ui的table组件提供的事件，当表格表头被右键点击时触发该事件

2. Data部分：

data() {

return{

menuVisible: false, //右键菜单的显示与隐藏

top: 0, //右键菜单的位置

left: 0,

colOptions: ['放射源ID', '源自编号', '类型', '强度', '还源人'], //多选框的选择项

colSelect: ['放射源ID', '源自编号', '类型', '强度', '还源人'], //多选框已选择的内容，即表格中显示的列

// istrue属性存放列的状态

colData: [

{ title: '放射源ID', istrue: true },

{ title: '源自编号', istrue: true },

{ title: '类型', istrue: true },

{ title: '强度', istrue: true },

{ title: '还源人', istrue: true }

]

}

}

3. Js部分：

(1) 在watch部分监听选中项的变化

watch: {

colOptions(newVal, oldVal) {

if (newVal) { //如果有值发生变化，即多选框的已选项变化

var arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) // 未选中

this.colData.filter(i => {

if (arr.indexOf(i.title) !== -1) {

i.istrue = false

} else {

i.istrue = true

}

})

}

}

},

(2)

methods: {

contextmenu(row, event) {

//先把菜单关闭，目的是第二次或者第n次右键鼠标的时候 它默认的是true

this.menuVisible = false

// 显示菜单

this.menuVisible = true

window.event.returnValue = false //阻止浏览器自带的右键菜单弹出

//给整个document绑定click监听事件， 左键单击任何位置执行foo方法

document.addEventListener('click', this.foo)

//event对应的是鼠标事件，找到鼠标点击位置的坐标，给菜单定位

this.top = event.clientY

this.left = event.clientX

},

foo() {

this.menuVisible = false //关闭菜单栏

document.removeEventListener('click', this.foo) //解绑click监听，很重要，具体原因可以看另外一篇博文

}

}

其中鼠标事件的返回值具体如下

这里调用的clientX和clientY(鼠标点击位置相对于浏览器的坐标)来给菜单定位

4. CSS部分：

简单设置了一下菜单的样式，具体可以看情况修改

.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;

}

2019-9-25更新：

实际开发中一般表格列比较多的时候才会用到动态显隐。如果还是一条一条写el-table-column反而太过复杂，因此尝试了使用v-for来循环，亲测可用，具体代码如下~

border

:data="list"

highlight-current-row

@header-contextmenu="contextmenu"

>

v-for="(item,index) in tableHeader"

v-if="colData[index].istrue"

:key="item.key"

show-overflow-tooltip

:label="item.label"

:prop="item.key"

>

{{ scope.row.qyrq|parseTime() }}

{{ scope.row[item.key] }}

dara() {

return{

tableHeader: [

{ label: '放射源ID', key: 'id' },

{ label: '源自编号', key: 'zbh' },

{ label: '类型', key: 'kind' },

{ label: '强度', key: 'qd' },

{ label: '还源人', key: 'user' },

]

}}

需要注意的是，这里的tableHeader、colOptions、colSelect、colData中列的顺序需要一一对应不可错乱！

以上这篇vue iview 隐藏Table组件里的某一列操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。