vueiview隐藏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){
}else{
}
微波通信
补充知识：vue——动态控制表格列的显⽰和隐藏如下所⽰：
mgmb
如图，为要实现的需求，即右键table的表头弹出菜单栏，通过勾选多选框的内容来控制表格列的显⽰和隐藏。1. HTML部分（elemen-ui）：
<el-table :data="list" border fit @header-contextmenu="contextmenu">
<el-table-column v-if="colData[0].istrue" label="放射源ID" align="center" />
<el-table-column v-if="colData[1].istrue" label="源⾃编号" align="center" />
<el-table-column v-if="colData[2].istrue" label="类型" align="center" />
<el-table-column v-if="colData[3].istrue" label="强度" align="center" />
<el-table-column v-if="colData[4].istrue" label="还源⼈" align="center" />
</el-table>
<!--右键弹出的菜单内容-->
<!--动态计算菜单出现的位置-->
<div v-show="menuVisible" :px",left:left+ "px"}" class="menu1">
<el-checkbox-group v-model="colOptions">
<el-checkbox v-for="item in colSelect" :key="item" :label="item" />
</el-checkbox-group>
</div>
(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部分监听选中项的变化
<script>
watch: {
colOptions(newVal, oldVal) {
if (newVal) { //如果有值发⽣变化，即多选框的已选项变化
var arr = lSelect.filter(i => newVal.indexOf(i) < 0) // 未选中
if (arr.indexOf(i.title) !== -1) {
i.istrue = false
} else {
i.istrue = true
}
})
}
}
},
</script>
(2)
methods: {
contextmenu(row, event) {
/
/先把菜单关闭，⽬的是第⼆次或者第n次右键⿏标的时候它默认的是true
// 显⽰菜单
urnValue = false //阻⽌浏览器⾃带的右键菜单弹出
//给整个document绑定click监听事件，左键单击任何位置执⾏foo⽅法
document.addEventListener('click', this.foo)
//event对应的是⿏标事件，到⿏标点击位置的坐标，给菜单定位
this.left = event.clientX
},
腹膜后
foo() {
}
}
其中⿏标事件的返回值具体如下
这⾥调⽤的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来循环，亲测可⽤，具体代码如下~ <el-table
border
:data="list"
highlight-current-row
@header-contextmenu="contextmenu"
>
<el-table-column
v-for="(item,index) in tableHeader"
v-if="colData[index].istrue"
:key="item.key"向家坝水电站
show-overflow-tooltip
:label="item.label"
:prop="item.key"
>
<template slot-scope="scope">
<span v-if="(item.key==='qyrq'||item.key==='ccrq'||item.key==='zcsj')&&w[item.key]">{{ w.qyrq|parseTime() }}</span>
<span v-else>{{ w[item.key] }} </span>
</template>
</el-table-column>
</el-table>
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组件⾥的某⼀列操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议