最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue+elementUI配置表格的列显示与隐藏代码示例
时间:2022-04-13 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下vue+elementUI配置表格的列显示与隐藏代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
描述:
表格的列过多时,可以根据需要控制列的显示与隐藏,目前是采用Vue+elementUI(适配Vue3的Element Plus)实现的,具体效果与代码如下:
效果图:
完整代码:
选择显示字段日期 姓名 省份 市区 地址 邮编 取消 确定 查看 编辑
问题:
1、可以简单实现,但最好的方法是列的全部字段也通过配置实现;
2、elementUI的popover嵌套在table里使用时,会出现面板的显示bug,例如本文是采用:visible=“visible”,如果按照正常双向绑定v-model:visible=“visible”,则会出现弹窗闪现的现象,弹出后会立马关闭;
现象:
原因猜想:
v-model:visible=“visible”,会自动触发遮罩层关闭,置visible变为false(watch监听visible,点击弹出按钮时,visible变为true后会立马变为false);
3、如果某一列设置minWidth属性,如果隐藏该列,则popover会出现弹出两个窗口的异常现象,例如“地址”列:
故可采用dialog来实现:
查看 编辑 选择显示字段日期 姓名 省份 市区 地址 邮编
效果:
-
上一个: 原生js实现弹动小球效果代码示例
-
下一个: vue项目实现面包屑导航代码示例
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12