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组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
随机推荐
- Taro时间选择器+地址选择器
时间地址选择器 https://www.manzj.net/topic/5c3c2123cd01b8af5bce4373
- 关于表达式&& 和 || 有多项的时候的取值
&& 表达式只有两项的时候,如果表达式为false, 返回为false 的那一个 ,为true的时候 返回最后一个值 || 只有两项的时候,返回为true 的那一个;都为fal ...
- netty系列之:java中的base64编码器
简介 什么是Base64编码呢?在回答这个问题之前,我们需要了解一下计算机中文件的分类,对于计算机来说文件可以分为两类,一类是文本文件,一类是二进制文件. 对于二进制文件来说,其内容是用二进制来表示的 ...
- JavaWeb入门day9-随笔(session/cookie)
会话 一个网站怎么证明用户访问过 服务端给客户端一个信件,客户端下次访问服务端带上信件就可以:cookie 服务器登记,下次访问匹配:session 保存会话的技术 cookie 客户端技术(响应.请 ...
- vue 跨域配置代理 get/post 请求
1.第一步要有 axios 插件 : npm i axios 首先要在自己的项目手动添加一个文件 vue.config.js 个人理解的为 这是axios 封装的跨域文件. 2.vue.config. ...
- 2021.11.10 fail树
2021.11.10 fail树 https://blog.csdn.net/niiick/article/details/87947160 1. AC自动机与fail树的神奇关系 1.1 AC自动机 ...
- SpringCloud入门简述
1.微服务简述 微服务,是一个小型的服务,也是一种设计理念,将一个大型繁杂的系统拆分为多个小型的服务,进行独立部署,这些服务在独立进程中运行,通过特定的协议进行通信 优点: 轻量化:一个服务不 ...
- Java中时间类中的Data类与Time类
小简博客 - 小简的技术栈,专注Java及其他计算机技术.互联网技术教程 (ideaopen.cn) Data类 Data类中常用方法 boolean after(Date date) 若当调用此方法 ...
- 给swap分区扩容
一.先添加一块硬盘,如果硬盘空间还有没有被分区的也可以使用,再创建一个分区(分区可以是主分区或者扩展的逻辑分区) fdisk /dev/sdb n 代表创建分区 p 代表 ...
- python学习-Day32
目录 今日内容详细 软件开发架构 概念 软件开发架构的分类 C/S架构 B/S架构 两种架构的优缺点 C/S架构: B/S架构: tip 网络编程 概念 互联网 互联网协议 OSI七层协议简介 专业设 ...