el-table的样式错乱解决、支持跨页多选

已于 2024-01-29 10:36:12 修改
阅读量449 收藏 8
点赞数 9
文章标签： vue.js elementui javascript
于 2024-01-29 10:22:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43901960/article/details/135906191
版权

问题1: 当表格中的字段改变，经常会出现行错乱问题
解决方法：

 给el-table添加 key ( 但是需要记住跨页勾选，所以不使用此方法
 table 的 doLayout 方法 （ 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法

在这里插入图片描述

问题2: 支持跨页勾选
解决方法：

el-table 添加 row-key属性
el-table-column 添加  type="selection"  reserve-selection属性

在这里插入图片描述
在这里插入图片描述

噜噜咕噜噜
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue修改Element的el-table样式的4种方法
10-14
主要介绍了vue修改Element的el-table样式的4种方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
使用element中el-table动态增减表头列的时候出现抖动闪动的问题
my466879168的博客
07-06 6759
el-table表格抖动的解决办法 动态切换表头的时候闪烁是因为表头重新计算高度导致的，重写表格样式即可 //重写表格样式，不在自动计算，解决表格渲染时闪烁问题 //不写这个使用v-if重新渲染表格的时候会再次计算下宽高，导致了抖动div高度=table容器高度/行数 .el-table .cell{ height:20px!important; } 表头变动的时候数据可能会下掉，使用element中的dolayout函数解决 element中写到：doLayout方法 对Table进行重新布局。当
element-table表格错位问题
baixue0111的博客
02-25 520
element-table 表格有多选，并设置滚动条之后，如果出现表格错乱，可能是因为【多选】el-table-column 设置了 fixed 属性，将其去掉即可。
el-table 多选框错乱
ingenuou_的博客
11-30 700
el-table 多选框错乱
element使用table样式混乱问题解决方案(doLayout)
烫一壶女儿红
06-28 9727
在使用element-ui的table表格时，有时候数据请求回来渲染完会出现以下情况。 理论上在数据渲染回来再次重新渲染一下表格就可以了，正好element文档也提供了这个方法。 实际操作如下 <el-table ref='table'> </el-table> axios.post('...') .then(function (response) { this.$nextTick(() => { this.$refs.ta
关于elementUI同时使用多个el-table导致的样式错乱问题解决
YANJIEAILISISI的博客
05-19 4556
添加对应的key属性值
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 el[email protected]，使用前请熟悉：el[email protected]el[email protected]安装npm install --save el-table-infinite-...
el-table树形表格表单验证(列表生成序号)
10-15
主要介绍了el-table树形表格表单验证(列表生成序号)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue el-table实现行内编辑功能
10-15
主要为大家详细介绍了vue el-table实现行内编辑功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
解决elementui 多个el-table切换样式错乱问题，以及doLayout的坑
weixin_43020925的博客
10-19 8409
天坑的饿了么ui，最近有个需求需要在弹窗里做一个表格切换功能，但是多个表格进行切换时，样式会错乱，用v-if也没有，后面按照官方文档提示，通过再el-tabe上绑定个ref，然后使用doLayout这个方法解决，可是最后结果就是一直报错doLayout is not a function，试了无数种方法，在el-dialog的opened回调里调用，写在this.$nextTick回调里，甚至升级到最新版elementui，可是还是没卵用，真的佛了。 最后发现只需要在el-table上绑定一个唯一的key值
Element el-table 表格列 v-if 显示 隐藏 样式错乱的问题
weixin_50912789的博客
10-21 1843
Element el-table 表格列 v-if 显示 隐藏 样式错乱的问题
el-table样式问题
子非渔
11-15 1661
el-table 表头和表体不对齐的问题 .el-table { .el-table__header-wrapper { .has-gutter { .gutter { display: block !important; } } } } el-table 冻结列高度问题 .el-table__fixed { ...
前端el-table 错乱问题解决
huatoudd的博客
08-03 1387
前端el-table的样式错位问题
解决ElementUI的Table组件固定列，在屏幕刚好够表格显示时，会出现固定列显示不全的问题
热门推荐
tooky_poom的博客
11-16 6万+
在使用ElementUI的Table组件中的固定列时，发现当表格刚好显示全，处于临界值状态时，固定列的高度(height)会于表格高度不一致，导致固定列显示不全，出现垂直滚动条。 如上图所示，现在表格下方是未出现水平滚动条的，处于表格宽度刚好够显示所有字段的临界值，固定列出现了高度变小的情况，导致显示不全。 上图为检查元素找到的固定列的DOM元素，固定列的DOM元素是独
Vue3选项式和组合式生命周期说明
最新发布
weixin_44072254的博客
05-16 442
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
前端Vue架构
weixin_45678402的博客
05-12 295
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
Vue.js的发展史（一）
2301_79683791的博客
05-15 731
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
根据地址栏url上key获取值
wwf1225的博客
05-10 264
/ 根据url上key获取值，key为参数名字，例如token。
用vue实现json模版编辑器
qq_44428688的博客
05-14 520
设想业务逻辑是拖拽控件生成表单 动手做了一个简单的demo 业务的原型图设想如下所示其中使用的技术主要是vuedragger。
el-table实现跨页多选
10-15
可以通过以下步骤实现el-table的跨页多选： 1. 在el-table中添加selection属性，用于存储选中的行数据。 2. 在el-table-column中添加type属性，设置为selection，用于显示复选框。 3. 在el-pagination中添加@...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值