【element ui】table的使用：table自适应高度 && 选中多行数据，table再次渲染时回显多选的数据

最新推荐文章于 2024-08-15 23:24:24 发布
置顶 最新推荐文章于 2024-08-15 23:24:24 发布
阅读量362 收藏
点赞数
分类专栏： element ui 文章标签： vue html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l2257890/article/details/107860392
版权
本文介绍了如何在Element UI的Table组件中实现表格自适应高度和选中多行数据的功能。在自适应高度部分，通过双向绑定table的height属性和改变父元素高度来实现。在选中多行数据场景下，利用row-key和reserve-selection属性确保数据动态更新时，选中状态得到保留。示例代码和效果展示帮助理解整个实现过程。
摘要由CSDN通过智能技术生成

看门见山，直接上代码和截图！

table自适应高度 & reserve-selection的使用

table 自适应高度

  • 效果图

  1. 初始化页面布局
    在这里插入图片描述

  2. 全屏表格，1.中页面的基础上，点击向上 button
    在这里插入图片描述

  3. 2.中页面的基础上，点击向下button, 隐藏表格
    在这里插入图片描述

  • 实现

table表格自适应高度，主要利用table的 height属性 ；

-template： 双向绑定table的height属性
在这里插入图片描述

    <
最低0.47元/天 解锁文章
樱木川粉
关注
专栏目录
element ui el-table 树形结构后端不返回children 重新调用接口渲染表格处理
weixin_67271921的博客
12-15 2365
加上空的children属性，这里最重要的是load懒加载函数，会收到三个参数，前两个打印都是整个表格数据, tableslist , resolve是一个promise成功函数 我们只需要向resolve中添加请求后端的参数即可渲染原本表格tableslist，这里的 :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 自己在尝试的过程中不写。注意：后端返回的children参数里需要id 不然会报错 实际我是会的。
vue之elementUI中根据后台数据循环渲染echars
w791275692的博客
06-11 3590
记录： 直接贴代码 # html部分 js 方法部分： forEchars(){ for(var i=0; i<this.CharsData.length;i++){ console.log('22222222222222',document.getElementById('bar'+i)) var myC...
深入探讨 ElementUI 动态渲染 el-table
最新发布
繁依Fanyi的博客
08-15 1459
在某些复杂场景中，我们可能需要在表格中嵌套其他表格或自定义列内容。我们可以通过实现这一需求：-- 自定义列内容 --> < div v-if = " column.custom " > {{ customRender(scope.row, column.prop) }} </ div > <!
element表格重新渲染问题------数据分两次获取，后半部分塞进去之后不更新
芳草萋萋鹦鹉洲哦
09-24 4423
点查询全部按钮之后已经将后半部分数据塞进去了，打印也能打印出来。但是页面就是没反应。 这时候我们要触发它的重新渲染才行。 我用的handleSelect（），导航切换时会重新渲染，handleSelect（）是element提供的切换方法。 另外为了防止表格重新渲染时闪一下暂无数据，我在代码中加了loading。 this.loading = true 最后完美呈现。 ...
element 表格展开行重新渲染问题
weixin_50575300的博客
07-06 1410
element
VUE+ElementUI: 表格数据处理后再渲染 遇到的问题
weixin_39698872的博客
12-11 3656
在开发过程中，遇到一种情况。table表格获取绑定数据后，需要对数据进行一些处理，比如设置一些属性，行中展示的是一个checkBox，需要将对应值解析为true false这种。 一开始的处理很直白，将设原本绑定的数据为originTableList item对象为item:{id:1,name:item1,isImportant:1} 经过预处理之后 为 tmpTableList ...
vue + element Table的数据多选，多页选择数据回显，分页记录保存选中的数据。
2301_79098879的博客
05-06 1001
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
解决element ui select下拉框不回显数据问题的解决
10-17
如果数据加载是异步的，可能需要使用`v-if`或`v-show`控制组件的显示，防止在数据未加载完成时渲染下拉框。 总结： 解决Element UI的`el-select`下拉框不回显数据的问题，关键在于检查数据类型、数据结构以及数据...
layui table数据修改的回显方法
12-10
当我们需要对表格中的数据进行编辑时，回显是确保用户能够看到原始数据的关键步骤。 首先，我们来看一下实现这一功能的基本思路。回显的本质就是将表格中选定的数据重新填充到表单的输入框中，以便用户可以查看并...
elementui Table高度自适应
weixin_43787161的博客
11-29 394
【代码】elementui Table高度自适应。
element-ui的el-table表格渲染错位以及高度计算错误问题
qq_44917563的博客
07-22 3387
前提：在项目中做动态表格，有时表格内容会错位，有时表格高度计算错误 原因：在获得数据之后DOM不重新渲染了，即DOM渲染发生在获取数据之前 解决方法：获取数据之后再让表格重新渲染，在el-table的 Table Methods中有一个方法 解决方法 在请求获得数据后，立刻获取更新后的DOM this.$nextTick(() => { this.$refs.multipleTable.doLayout(); // el-table加ref="multipleTable" })
elementUI table组件渲染问题
不知名的博客
07-27 4428
elementUI table组件渲染问题 1、问题： 问题描述：页面内，使用选项卡，进行内容显示的切换。切换后，原本高度合适的表格出现白边，以及滚动条 检查Dom会发现，el-table组件内，发现了一个类名为 is-scrolling-none 的固定行内样式的高度的div，导致高度显示错误： <div class="el-table__body-wrapper is-scrolling-none" style="height: 510px;"> ------ </div&
Element UI 中如何重新渲染组件
github_38616039的博客
01-11 7226
某些情况下组件需要在没有数据的情况下预先加载到页面上，如 el-table，此时若通过其他手段刷新了数据，该组件并不会立即重载，要解决这个问题，可为组件指定一个 key ，在数据被刷新后修改 key 的值，即可触发组件刷新机制。 例：el-table 展开后从外部获取数据并重载内部的 el-table： <el-table border stripe :data="data" @expand-change="onExpandSelected"> <el-table-c
ElementUI - 表格组件（el-table）数据发生改变时视图不刷新渲染问题解决方案
热门推荐
王佳斌
06-18 1万+
前言 mqtt 做实时数据传输页面时，发现 数据变了但视图没变。 el-table 表格组件，每次只能监听整个 row 的变化，仅是 row 中某个属性变化无法追踪（需要重新给 table 中的某一行赋值）。 解决方案 vue.set() API（官方文档）：https://cn.vuejs.org/v2/api/#Vue-set 使用 vue.$set() 方法，触发视图更新即可。 /* * target: 要更改的数据源(可以是对象或者数组) * key：要更改的具体数据 * value ：重
【前端踩坑】elementUI表格el-table数据排序/更新后，不重新渲染（页面数据不更新）
weixin_44649384的博客
12-30 5041
查看element文档，数据需要设置key，但是用el-table提供的row-key不太好用。这里预测是，前后数据内容一致，dom不更新，可能是为了提升页面性能。给table增加一个随机key，每次重新赋值tableData的时候，也传递随机key值，这样页面就可以重新渲染el-table了。前端页面选择重新排序，重新向后端请求数据，排序规则改变但数据内容不不变，表格数据不重新渲染。
vue 解决el-table 表体数据发生变化时，未重新渲染问题
goodboxs的博客
01-18 2989
父组件中数量改变后总数重新计算。
element el-table 动态表头重新封装+render渲染方式
晨曦的博客
04-16 863
封装组件 newtable.vue。
重新渲染el-table的表格
weixin_53504747的博客
04-21 1万+
beforeUpdate(){ this.$nextTick(() => { //在数据加载完，重新渲染表格 this.$refs['table'].doLayout(); })
element-plus el-table 多选数据回显
10-20
在使用 element-plus 的 el-table 进行多选时，可以通过绑定一个对象来实现数据回显。具体实现方法如下： 1. 在获取表格数据时，将数据转化为一个以 id 为键，整个数据对象为值的字典对象。 2. 在获取回显数据时，将数据转化为一个以 deviceId 为键，整个数据对象为值的字典对象。 3. 在 el-table 的 @select 事件中，将选中的数据对象存入回显数据字典对象中。 4. 在 el-table 的 @select-all 事件中，遍历所有数据对象，将其存入回显数据字典对象中。 5. 在 el-table 的 :row-selected 事件中，根据回显数据字典对象中是否存在当前数据对象的 id 或 deviceId，来判断当前数据对象是否应该被选中。 具体代码实现可以参考以下示例： ``` <template> <el-table ref="tableRef" :data="tableData" @select="handleSelect" @select-all="handleSelectAll" :row-selected="isRowSelected" row-key="id" > <el-table-column type="selection" width="55" /> <el-table-column type="index" label="序号" width="150" /> <el-table-column prop="name" label="电厂名称" /> </el-table> </template> <script> export default { data() { return { tableData: [], // 表格数据 selectedData: {}, // 回显数据 } }, methods: { // 获取表格数据 async fetchData() { const res = await fetchTableData() this.tableData = res.data.reduce((dic, item) => { dic[item.id] = item return dic }, {}) }, // 获取回显数据 async fetchSelectedData() { const res = await fetchSelectedData() this.selectedData = res.data.reduce((dic, item) => { dic[item.deviceId] = item return dic }, {}) }, // 处理单个选中事件 handleSelect(selection, row) { this.$set(this.selectedData, row.deviceId, row) }, // 处理全选事件 handleSelectAll(selection) { Object.values(this.tableData).forEach(row => { this.$set(this.selectedData, row.deviceId, row) }) }, // 判断行是否被选中 isRowSelected(row) { return !!this.selectedData[row.id || row.deviceId] }, }, mounted() { this.fetchData() this.fetchSelectedData() }, } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值