elementui table隐藏列,element ui table某列隐藏
这篇文章主要为大家详细介绍了某视频剪辑软件元素配置表格的列显示与隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件元素配置表格的列显示与隐藏，供大家参考，具体内容如下
描述：
表格的列过多时，可以根据需要控制列的显示与隐藏，目前是采用Vue elementUI(适配Vue3的元素加)实现的，具体效果与代码如下：
效果图：
完整代码：
模板
div id=应用程序
El-table:data=表格数据边框样式=宽度：100% ref=表格
埃尔-表格-列
固定的；不变的
type=index
align=居中
:index=1
模板#标题
埃尔-波普沃
位置=底部
：宽度=600
:visible=visible
！-配置列面板-
过渡名称=淡化
差异
差异选择显示字段/div
差异
El-checkbox v-model=显示列。日期已禁用日期/El-复选框
El-checkbox v-model=显示列。名称姓名/El-复选框
El-checkbox v-model=显示列。省份省份/El-复选框
El-checkbox v-model=显示列。“城市”市区/El-复选框
El-checkbox v-model=显示列。“地址”地址/El-复选框
El-checkbox v-model=显示列。邮政编码邮编/El-复选框
/div
/div
/过渡
div style= text-align:right；边距：0
El-button size= mini type= text @ click= visible=false 取消/el-button
El-button size= mini type= primary plain @ click= save column 确定/el-button
/div
模板#参考
我
埃尔图标设置
style= font-size:22px；光标：指针
@click=visible=true
/i
/模板
/el-popover
/模板
/El-表格-列
埃尔-表格-列
prop=date
标签=日期
宽度=150
v-if=showColumn.date
/El-表格-列
埃尔-表格-列
prop=name
标签=姓名
宽度=120
v-if=showColumn.name
/El-表格-列
埃尔-表格-列
省
标签=省份
宽度=120
v-if=showColumn.provinces
/El-表格-列
埃尔-表格-列
prop=城市
标签=市区
宽度=120
v-if=showColumn.city
/El-表格-列
埃尔-表格-列
prop=地址
标签=地址
最小宽度=300
v-if=显示列。“地址”
/El-表格-列
埃尔-表格-列
prop=zip
标签=邮编
宽度=120
v-if=showColumn.zipCode
/El-表格-列
埃尔-表格-列标签=操作固定=右宽=100 对齐=居中
template #default=scope
El-button @ click= handle click(范围。row) type= text size= small
查看/el-button
El-button type= text size= small 编辑/el-button
/模板
/El-表格-列
/el-table
/div
/模板
脚本
导出默认值{
data() {
返回{
可见：假，
表格数据：[
{
日期："2016年5月2日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1518 弄，
邮编：200333,
},
{
日期："2016年5月四日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1517 弄，
邮编：200333,
},
{
日期："2016年5月一日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1519 弄，
邮编：200333,
},
{
日期："2016年5月3日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1516 弄，
邮编：200333,
},
],
//列的配置化对象，存储配置信息
显示列：{
日期：真，
名：真，
省份：没错，
城市：没错，
是的，
邮政编码：没错，
},
};
},
已安装(){
//发请求得到showColumnInitData的列的名字
如果(本地存储。getitem( columnSet ){
这个。显示column=JSON。解析(本地存储。getitem(列et ))
}否则{
this.showColumn={
日期：真，
名：真，
省份：没错，
城市：没错，
是的，
邮政编码：没错，
};
}
},
方法：{
手柄单击（行){
控制台。日志(行)；
},
存储列(){
本地存储。setitem( columns et ，JSON.stringify(this.showColumn))
this.visible=false
},
},
};
/脚本
style lang=postcss 范围
/* 控制淡入淡出效果*/。淡入激活，淡化-保持活动状态{
转场：不透明度0.3秒
}。淡入，淡出-离开至{
不透明度：0;
}
/风格
问题：
1、可以简单实现，但最好的方法是列的全部字段也通过配置实现；
2、元素的酥脆饼嵌套在桌子里使用时，会出现面板的显示bug，例如本文是采用：visible="visible "，如果按照正常双向绑定v-model:visible="visible "，则会出现弹窗闪现的现象，弹出后会立马关闭；
现象：
原因猜想：
v-model:visible="visible "，会自动触发遮罩层关闭，置看得见的变为假(观看监听可见的，点击弹出按钮时，可见变为真实的后会立马变为假);
3、如果某一列设置最小宽度属性，如果隐藏该列，则酥脆饼会出现弹出两个窗口的异常现象，例如"地址"列：
故可采用对话来实现：
模板
div id=应用程序
El-table:data=表格数据边框样式=宽度：100% ref=表格
埃尔-表格-列
固定的；不变的
type=index
align=居中
:index=1
模板#标题
我
埃尔图标设置
style= font-size:22px；光标：指针
@click=visible=true
/i
/模板
/El-表格-列
埃尔-表格-列
prop=date
标签=日期
宽度=150
v-if=showColumn.date
/El-表格-列
埃尔-表格-列
prop=name
标签=姓名
宽度=120
v-if=showColumn.name
/El-表格-列
埃尔-表格-列
省
标签=省份
宽度=120
v-if=showColumn.provinces
/El-表格-列
埃尔-表格-列
prop=城市
标签=市区
宽度=120
v-if=showColumn.city
/El-表格-列
埃尔-表格-列
prop=地址
标签=地址
最小宽度=300
v-if=显示列。“地址”
/El-表格-列
埃尔-表格-列
prop=zip
标签=邮编
宽度=120
v-if=showColumn.zipCode
/El-表格-列
埃尔-表格-列标签=操作固定=右宽=100 对齐=居中
template #default=scope
El-button @ click= handle click(范围。row) type= text size= small
查看/el-button
El-button type= text size= small 编辑/el-button
/模板
/El-表格-列
/el-table
el-dialog title=字段配置v-model=可见
过渡名称=淡化
差异
差异选择显示字段/div
差异
El-checkbox v-model=显示列。日期已禁用日期/El-复选框
El-checkbox v-model=显示列。名称姓名/El-复选框
El-checkbox v-model=显示列。省份省份/El-复选框
El-checkbox v-model=显示列。“城市”市区/El-复选框
El-checkbox v-model=显示列。“地址”地址/El-复选框
El-checkbox v-model=显示列。邮政编码邮编/El-复选框
/div
/div
/过渡
模板#页脚
span class=对话框页脚
el-button @click=visible=false 取消/el-button
El-button type= primary @ click=保存列确定/el-button
/span
/模板
/el-dialog
/div
/模板
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。