iview隐藏表格的某一列,iview中的table组件
本文主要介绍vue iview在表格组件中隐藏了一个列操作，有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。
1、假设我要隐藏columns里的 “账户组名称”
列：[
{
类型：“选择”，
宽度：60，
对齐：“居中”
},
{
标题：帐户ID ，
密钥：“accountIdString”
},
{
标题：帐户名，
密钥：“帐户名”
},
{
标题：“帐户组名称”，
密钥：“帐户组名”
}]
2、根据各自需求去判断
例如：“帐户ID和帐户名称”显示在单个帐户表的标题中，“帐户组名称”显示在帐户组表的标题中。
if(this . querycostcomparisondata[I].accountGroupName){
this . columns=this . columns . filter(col=col . key！== account id string )；
this . columns=this . columns . filter(col=col . key！== account name )；
}否则{
this . columns=this . columns . filter(col=col . key！== account group name )；
}
补充知识：vue——动态控制表格列的显示和隐藏
如下所示：
如图，对于要实现的需求，即在表头上点击右键弹出菜单栏，勾选多选框的内容，控制表格列的显示和隐藏。
1. HTML部分（elemen-ui）：
El-table:data= list border fit @ header-context menu= context menu
El-table-column v-if= coldata[0]。istrue label=放射源ID align=center/
El-table-column v-if= coldata[1]。is true label= from number align= center /
El-table-column v-if= coldata[2]。is true label= type align= center /
El-table-column v-if= coldata[3]。is true label= strength align= center /
El-table-column v-if= coldata[4]。is true label= return person align= center /
/el-table
！-右键单击弹出的菜单内容-
！-动态计算菜单出现的位置-
div v-show= menuVisible :style= { top:top quot；pxquot，left:left quot；pxquot} class=menu1
El-checkbox-group v-model= co options
El-checkbox v-for= item in col select :key= item :label= item /
/el-checkbox-group
/div
(1)使用v-if=colData[0]。判断表列的状态。
(2) @header-contextmenu是element-ui的表格组件提供的事件，当表格表头被右键点击时触发。
2. Data部分：
data() {
返回{
MenuVisible: false，//显示和隐藏右键菜单
Top: 0，//右键菜单的位置
左：0，
选项：[放射源ID ，来源号，类型，强度，//多选框的选择
ColSelect: [放射源ID ，来源号，类型，强度，归源]，//多选框选择的内容是表格中显示的列。
//istrue属性存储列的状态。
colData: [
{title:放射源ID ，istrue: true}，
{标题：从号码，istrue: true}，
{title: type ，istrue: true}，
{title:力量，istrue: true}，
{title:回归本源，istrue: true}
]
}
}
3. Js部分：
(1)监视观察部分中所选项目的变化。
脚本
观察：{
选项(newVal，oldVal) {
If (newVal) {//如果任意值发生变化，即多选框的选中项发生变化。
var arr=this . col select . filter(I=new val . index of(I)0)//未选择
this.colData.filter(i={
if (arr.indexOf(i.title)！==-1) {
i.istrue=false
}否则{
i.istrue=true
}
})
}
}
},
/脚本
(2)
方法：{
上下文菜单(行，事件){
//先关闭菜单，这样第二次或者第n次鼠标右键的时候默认为真。
this.menuVisible=false
//显示菜单
this.menuVisible=true
window . event . return value=false//防止浏览器自带的右键菜单弹出。
//将click listening事件绑定到整个文档，左键单击任意位置执行foo方法。
document . addevent listener( click ，this.foo)
//事件对应于鼠标事件。找到鼠标点击位置的坐标，定位菜单。
this.top=event.clientY
this.left=event.clientX
},
foo() {
This.menuVisible=false //关闭菜单栏
document . removeeventlistener( click ，this . foo)//解除绑定点击监控非常重要。具体原因见另一篇博文。
}
}
鼠标事件的返回值如下
这里调用的clientX和客户（鼠标点击位置相对于浏览器的坐标)来给菜单定位
4. CSS部分：
简单设置了一下菜单的样式，具体可以看情况修改。菜单1{
位置：固定；
高度：自动；
宽度：231像素
边框半径：3px
边框：1px固体# 999999
背景色：# f4f4f4
填充：10px
z指数：1000
}。埃尔-复选框{
显示：块；
高度：20px
行高：20px
填充：0 5px
右边距：0;
字体大小：12px
边框：1px纯色透明；
}。埃尔-复选框：悬停{
边框半径：3px
边框：1px固体# 999999
}
2019-9-25更新：
实际开发中一般表格列比较多的时候才会用到动态显隐。如果还是一条一条写埃尔-表格-列反而太过复杂，因此尝试了使用迭代来循环，亲测可用，具体代码如下~
埃尔表
边界
:data=list
突出显示-当前行
@ header-context menu=上下文菜单
埃尔-表格-列
表头中的v-for=(项目，索引
v-if=colData[index].伊斯特鲁
:key=item.key
显示溢出工具提示
:label=item.label
:prop=item.key
模板槽-范围="范围"
span v-if=(item。key=== qyrq item。key=== ccrq item。key=== zcsj )范围。行[项目。key]“{ { scope。划。qyrq parse time()} }/span
span v-else { { scope。行[项目。key]} }/span
/模板
/El-表格-列
/el-table
达拉(){
返回{
表格标题：[
{标签: 放射源ID ，键： id }，
{标签: 源自编号，key: zbh }，
{标签: 类型，key: kind }，
{标签: 强度，键： qd }，
{标签: 还源人，键："用户"},
]
}}
需要注意的是，这里的tableHeader、colOptions、colSelect、colData中列的顺序需要一一对应不可错乱！
以上这篇vue iview隐藏桌子组件里的某一列操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。