vue隐藏表单,vue 控制显示隐藏
这篇文章主要为大家详细介绍了某视频剪辑软件实现动态控制表格列的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现动态控制表格列显示隐藏的具体代码，供大家参考，具体内容如下
一、效果
如上图所示，点击桌子右上方的表格按钮，弹出菜单栏，进行勾选，从而达到表格对应列显示和隐藏
二、代码
1.HTML部分
模板
div id=应用程序
El-table:data=表格数据边框样式=宽度：100% ref=表格
埃尔-表格-列
固定的；不变的
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 对齐=居中
模板slot=header
我
埃尔图标设置
style= font-size:22px；光标：指针
@click=showColumnOption
/i
/模板
模板槽-范围="范围"
El-button @ click= handle click(范围。row) type= text size= small
查看/el-button
El-button type= text size= small 编辑/el-button
/模板
/El-表格-列
/el-table
！-配置列面板-
过渡名称=淡化
div class=列选项 v-show= isShowColumn
div class=内容
div class=head 选择显示字段/div
div class=body
埃尔-复选框v-model=checkList.date 已禁用日期/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 class=页脚
El-button size= small type= primary plain @ click= save column
保存列配置/el-button
/div
/div
/div
/过渡
/div
/模板
通过v-if=showColumn.date 来判断表格对应列的状态
2.javascript部分
脚本
导出默认值{
data() {
返回{
isShowColumn: false，
表格数据：[
{
日期："2016年5月2日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1518 弄，
邮编：200333,
},
{
日期："2016年5月四日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1517 弄，
邮编：200333,
},
{
日期："2016年5月一日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1519 弄，
邮编：200333,
},
{
日期："2016年5月3日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1516 弄，
邮编：200333,
},
],
//列的配置化对象，存储配置信息
清单：{},
显示列：{
日期：真，
名：真，
省份：没错，
城市：没错，
是的，
邮政编码：没错，
},
};
},
观察：{
//监听复选框配置列所有的变化
清单：{
处理程序：函数(newnew，oldold) {
//控制台。日志(new new)；
这个。show column=new new
//这里需要让表格重新绘制一下，否则会产生固定列错位的情况
这个. nextTick(()={
这个参考文献。桌子。dolayout()；
});
},
深：真的，
即时：正确
},
},
已安装(){
//发请求得到检查列表初始化数据的列的名字
如果(本地存储。getitem( columnSet ){
这个。检查表=JSON。解析(本地存储。getitem(列et ))
}否则{
this.checkList={
日期：真，
名：真，
省份：没错，
城市：没错，
是的，
邮政编码：没错，
};
}
},
方法：{
手柄单击（行){
控制台。日志(行)；
},
showColumnOption() {
this.isShowColumn=true
},
存储列(){
本地存储。setitem( columns et ，JSON.stringify(this.checkList))
this.isShowColumn=false
},
},
};
/脚本
3.css样式部分。columnOption {
位置：固定；
z指数：20;
top:0；
左：0;
宽度：100%;
身高：100%;
背景色：rgba(0，0，0，0.3)；
显示器：flex
弹性-方向：行-反向；内容{
宽度：100像素
身高：100%;
背景色：rgb(203，223，198)；头部{
宽度：100%;
身高：44px
边框-底部：1px纯色# 000;
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
字体大小：12px
}。正文{
宽度：100%;
高度：calc(100%-88px)；
框大小：边框-框；
填充顶部：10px
溢出-y:自动；项目{
宽度：100%;
身高：100%;
溢出-y:自动；
显示器：flex
伸缩方向：列；埃尔-复选框{
宽度：100%;
高度：28px
行高：28px
边距-底部：14px
显示：内嵌-块；
字体系列：方平SC；
字体样式：正常；
字体粗细：正常；
字体大小：14px
颜色：# 000;
溢出：隐藏；
文本溢出：省略号；
空白：nowrap
框大小：边框-框；
左填充：14px
}。埃尔-复选框：悬停{
背景色：# f5f 7 fa
}
}
}。页脚{
宽度：100%;
身高：44px
边框顶部：1px纯色# 000;
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
}
}
}
//控制淡入淡出效果。淡入激活，淡化-保持活动状态{
转场：不透明度0.3秒
}。淡入，淡出-离开至{
不透明度：0;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。