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时的问题的更多相关文章

  1. Element UI table组件源码分析

    本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

  2. 普通element ui table组件的使用

    1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...

  3. element ui table组件自定义合计栏,后台给的数据

    合计的数据是后台传的,所以用table组件自定义一行用来合计 <el-table border fit v-loading.body="listLoading" elemen ...

  4. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  5. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  6. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  7. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  8. Element UI table参数中的selectable的使用

    Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="s ...

  9. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

  10. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

随机推荐

  1. Mybatis-Dao层实现(通过代理方式)

    1.代理方式开发是主流 2.Mapper接口开发方法只需要编写Mapper接口(相当于Dao接口),然后由Mybatis根据接口创建动态代理对象 Mapper接口开发需要遵循以下规范 一一对应 Use ...

  2. Visual Studio 安装 MFC

    **Visual Studio 安装 MFC 库**   打开 Visual Studio Installer //程序   选择对应的版本 (本人 VS2022)->修改   [点击]单个组件 ...

  3. @RequestBody和@RequestParam注解以及返回值,ajax相关知识点

    关于前后端传递json数据这块查了好多资料,好多地方还是不清楚,先记录一下清楚的地方. 如果我们前端使用ajax发json数据,一般都加上contentType:'application/json;c ...

  4. eclipse项目导入工作空间提示已存在问题

    项目直接放在 workspace 目录下,必须项目名和项目文件夹名相同,主要找的是eclipse 项目文件夹下的 .project 文件中的 <name> ... </name> ...

  5. 小天才XTC Z1S开启ADB

    起因 最近入手了Apple Watch,但因系统闭源和国区App Store第三方应用实在是少,所以就开始折腾起安卓表来了.正好家里有块给小孩子用的小天才手表,所以就想到了通过ADB调试安装一些这块表 ...

  6. JavaWeb学习第一阶段结束

    模仿狂神实现简单的用户增删改查,增加了前端登录时的密码验证 JavaWeb学习第一阶段结束,相较于第一阶段的一味学习,第二阶段想拿出更多的时间来阅读别人的源码以及跟着做简单的小项目,同时进一步深入学习 ...

  7. android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面

    android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面 首先写添加到数据库 在DBOpenHelper中添加创建记账表的语句 //创建记账表 sql = "c ...

  8. 2021.08.06 P2441 角色属性树(树形结构)

    2021.08.06 P2441 角色属性树(树形结构) P2441 角色属性树 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题意: 求离x最近的祖先y且(x,y)>1. ...

  9. spring盒springMVC整合父子容器问题:整合Spring时Service层为什么不做全局包扫描详解

    整合Spring时Service层为什么不做全局包扫描详解 一.Spring和SpringMVC的父子容器关系 1.讲问题之前要先明白一个关系 一般来说,我们在整合Spring和SpringMVC这两 ...

  10. vue - Vue组件化编程

    今天是对vue组件化的一个理解,最主要的单文件组件,然后就可以脚手架的学习了,本来昨晚就该上传的,但是用的那个上传博客园的Python脚本不行了,换了一个新的. 组件化让我越来越感觉到框架的力量了 一 ...