element-ui table组件使用v-if时的问题
element-ui项目中经常遇到需要使用v-if指令来根据情况动态显示隐藏某些列情况,这时就会出现滚动条样式异常、列错乱、列宽错乱等问题
解决办法:在el-table上添加:key="Math.random()"但这会在某些操作下每次重新渲染table,例如获取选择行、一些操作交互等情况,因为Math.random()随机数一直在变化,而且对于selection选择性表格在获取到选择行时会出现所选择的标记(选择的那个勾)消失的问题,但其实数据是获取到的,这也是因为Math.random变化的问题
给el-table-column每一列添加:key="Math.random()"也会出现列每次重新渲染闪烁的问题
终极解决:给每一列el-table-column添加key值为固定值,例如列的prop属性值,这样避免了v-if切换时列错乱和列宽错乱问题,但还是会出现表格滚动条上移的问题,偏离原始位置
解决办法:在设置显示隐藏的办法后面添加
this.$nextTick(() => {this.$refs.multipleTable.doLayout();})
element-ui table组件使用v-if时的问题的更多相关文章
- Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
- 普通element ui table组件的使用
1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...
- element ui table组件自定义合计栏,后台给的数据
合计的数据是后台传的,所以用table组件自定义一行用来合计 <el-table border fit v-loading.body="listLoading" elemen ...
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- [转]vue Element UI走马灯组件重写
https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...
- VUE -- 对 Element UI table中数据进行二次处理
时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...
- Element UI table参数中的selectable的使用
Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="s ...
- element UI table 过滤 筛选问题
一.问提描述 使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
随机推荐
- Hyperledger Fabric的test-network启动过程Bash源码详解
前言 在基于Debian搭建Hyperledger Fabric 2.4开发环境及运行简单案例中,我们已经完成了Fabric 2.4的环境搭建及fabric-samples/test-network官 ...
- 记录:替换线上springboot项目可执行jar包中依赖jar里的class文件
问题背景: 项目组发现线上版本问题后,定位是由于项目依赖的某个jar包中有个小BUG. 解决方案: 在修改了对应的java文件后,编译出对应的class文件.从生产环境下载项目jar包,解压后,找到对 ...
- JS/JQ动态创建(添加)optgroup和option属性
JavaScript和Jquery动态操作select下拉框 相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中.因为之前牵扯到optgroup标签时遇到了 ...
- 2021.08.06 P3478 STA-Station(树形结构)
2021.08.06 P3478 STA-Station(树形结构) [P3478 POI2008]STA-Station - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题意: 给 ...
- k8s面试1-27
目录 1.k8s常用命令有哪些? 2.报错查看各种日志方法? 3.k8s的组建有哪些? 4.k8s中安全机制是什么? 5.常用的控制器有哪些? 6.service类型有哪些? 7.ingress-Ng ...
- java中int的最值解析
java中int的最大值为十进制的2147483647,也就是java能进行操作的最大数值,超出就会显示不正常.针对以下问题进行讨论. 1.最大值为什么是2147483647? java中int类型占 ...
- ubuntu16.04安装MATLAB R2017b步骤详解(附完整文件包)
摘要:介绍在ubuntu16.04中从下载到安装成功的完整步骤.本文给出MATLAB R2017b(Linux系统)的完整安装包百度云盘下载地址,逐步介绍一种简单易行的安装方法,在桌面创建快捷方式,最 ...
- Jx.Cms开发笔记(六)-重写Compiler
我们在Jx.Cms开发笔记(三)-Views主题动态切换中说了如何切换主题.但是这里有一个问题,就是主题切换时,会报错 这是由于asp.net core在处理Views的信息的时候是在构造函数中处理的 ...
- @Resource与构造函数踩坑
(虽然解决了需求,但我还是没搞懂为什么构造函数结束后,调用userMapper注入还是为空!) 首先,我有一个没有问题的userMapper类,用于处理user的数据库处理. 其次,我在另一个类里面使 ...
- Git&Gitee
目录 Git Git介绍 安装 命令学习 Git的作用 git与svn比较 Git,GitHub,GitLab,Gitee Git工作流程 Git常用命令 在仓库目录终端下 - 设置全局用户 在仓库目 ...