解决vue3+element-plus 使用table 展开行时，删除或更新展开行中的数据，展开行自动合闭的问题

已于 2022-06-21 20:39:32 修改
阅读量1.4k 收藏 1
点赞数 3
文章标签： vue.js 前端 javascript
于 2022-06-21 17:48:46 首次发布
原文链接：http://nicethemes.cn/news/txtlist_i193006v.html
版权

在使用element-plus 中的table 展开行时，会有这种需求：修改完数据之后，可以直接在展开行中显示出最新的数据。

测试时发现添加或删除展开行中数据时，使用局部刷新数据 展开行会自动关闭，通过$refs 也无法获取展开行中元素。

解决方法

可以通过给table 元素添加row-key 属性来优化表格的渲染。
row-key 属性

<el-table :data="tableData" row-key="id" stripe border style="width: 100%">

只要添加这个属性就行 id是什么无所谓 就写个“id”都行

lunaʚゞɞ
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Bootstrap的可展开表格行的jQuery表格插件
12-11
bootstrap-table-expandable是一款非常实用的基于Bootstrap的可展开表格行的jQuery表格插件。该表格插件通过设置可以使每一行都具有展开和收缩的功能，行展开时可以显示额外的信息。而且该插件使用非常简单。
vue3+elementPlus后台管理系统
08-19
包含axios、echart和富文本编辑器
element-plus 扩展框为展开状态后，修改数时会自动收起
最新发布
hln136285的博客
04-25 890
template>family: [zip: [},},},],},zip: [},},},],},zip: [},},},],},],},family: [zip: [},},},],},zip: [},},},],},zip: [},},},],},],},family: [zip: [},},},],},zip: [},},},],},zip: [
Vue3 框架 + Element-Plus 库 + mockjs 假数据 + vue3-demo + 环境已经配好拿来就用
07-06
内容概要：该 Vue3-demo 是基于 Vue3 框架搭配 Element-Plus ui库，建立的简单工程，并搭建了 Mockjs 和 axios工具，可以快速开发的工程，已经成功引入并建立了一个基于 Element-Plus 库中 table 组件的页面; 适用人群：想要了解 Vue3 新语法以及项目的，想要查看如何引入 Element-Plus 库及 Mockjs 的假数据如何使用及引入语法的, 想要基于已经成功引入这些组件的基本工程，来事件新的 Vue3 demo 的； 其他说明：里面用的是 Vue3 新语法，使用 Element-Plus 库创建了一个表格页面，可以搭建新的页面;
vue3_ts_axios_elementPlus:一个基于vue3 全家桶 + typescript+ element-plus+axios等 搭建的基础代码库, 有登录拦截鉴权，基本页面框架已经搭建好，可以直接进行各个模块开发
05-09
cli_demo 一个基于vue3 全家桶 + typescript + element-plus 搭建的基础代码库, 有登录拦截鉴权，基本页面框架已经搭建好，可以直接进行各个模块开发。 :open_book: Vue3.0 相关文档： 相关库名称 在线地址 :link: Vue3.0 官方文档 Vue3.0 中文文档 Composition-API手册 Vue3.0 源码学习 Vue-Router 官方文档 Vuex4.0 element-plus 主要用到的库 vue 全家桶 vue3 + vue-router + vuex + typescript http 请求:axios ui 库:element-plus. 代码检查:eslint+eslint-typescript,格式化:prettier webpack 插件:style-resources-loader（全局 stylus）webpack-bundle
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。 =======以下是之前的说明===== 原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
elementPlus实现el-table行展开的记忆功能（当行展开后切入其他弹窗-当弹窗关闭此行依然是展开状态）
weixin_45474019的博客
04-19 680
vue3，elementPlus，el-table
element ui表格 局部更新某一行
KangTongShun的博客
06-10 3816
前言 最近遇到了个需求，要求单击通过或者拒绝时隐藏 两个按钮并且显示状态 拒绝或 通过 问题出现 以下是这个状态切换的代码，根据v-if 判断状态是不是审核中，若是的话，就显示按钮，否则显示tag <el-table-column class-name="status-col" label="订单状态" width="140"> <template slot-scope="scope"> <div v-if="scope.row
修改element中的el-table的一行的数据，并实时表格更新
热门推荐
huang_jimei的博客
11-02 1万+
一、效果图 说明：点击修改按钮，可以修改当前行的屠宰数量，并且实时更新 二、主要代码 <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"> <el-table-column prop="tuzai" width="80" label="屠宰数量" align="center"></el-table-column>
vue element组件树状表格删除某行数据实现代码
@二老的博客
07-03 1203
思路 通过scope.$index拿到所在行索引，将树状表格看作正常行表格，有序递归的遍历树状表格，能够确保行数正确递增。支持多级层次，下面js实现代码拷贝即用。 实现代码 data() { return { isDeleted:false, row : 0, tableData: [{ id: 123, date: '20216-05-02', name: '王小虎',
ElementPlus按需自动导入VITE配置
03-08
自动导入使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。 这里导入的ElementPlus 使用格式： <i-ep-名称 /> 例子： <el-icon :size="size" :color="color"> <i-ep-Edit /> </el-icon> 图标名称，直接看官网https://element-plus.org/zh-CN/component/icon.html
elementPlus.docx
03-05
elementPlus离线开发文档
jQuery表格行展开隐藏代码
06-24
jQuery表格行展开隐藏代码是一款基于Bootstrap.js表格插件制作的table表格行展开收缩隐藏效果代码。
项目中简单封装vue3+element-plus表单
04-01
项目中简单封装vue3+element-plus表单
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
主要为大家详细介绍了Vue+Element实现表格的编辑、删除、以及新增行的最优方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
element-pro-components:基于element-plus的Vue 3的组件库
04-18
元素亲组件（WIP） 基于element-plus的Vue 3的组件库|去做： 组件 ProLayout 专业菜单 面包屑 ProTabs ProTable 专业表格 ProInputTag ProRadio ProRadioButton ProCheckbox ProCheckboxButton ProSelect ProCrud ...
element Plus表格动态合并列
bighead的博客
05-07 1770
效果图 这里只设置了合并前三列，可以通过参数自己来定义合并哪些列 1. 创建ts文件，通过导出一个函数来提供给el-table的和并方法使用 /** * 合并相同数据，导出合并列所需的方法(只适合el-table) * @param {Object} data * @param {Object} rowspanArray */ export function getRowspanMethod(data:any[], rowspanArray:any[]) { /** * 要合并列的数据
如何将elementui的el-table的展开行事件用自定义的按钮控制，并且可以实现“展开”“收起”的切换
wzy_PROTEIN的博客
09-26 4282
需求是表格内每行点击展开按钮要展开内容，查看elementUI的官网有展开例子，但是官网的例子是点击表格前的箭头来控制展开收起的。
解决vue3+element-plus 使用table 展开行时，删除展开行中的数据，展开行自动合闭的问题
04-20
好的，这个问题我可以帮您解答。您可以在删除展开行的数据时，手动调用`row-expand`组件的`toggleRowExpansion`方法将展开的行合闭。具体实现可以参考以下代码示例： ``` <template> <el-table :data="tableData" v-if="tableData.length"> <el-table-column type="expand"> <!-- 定义展开的内容 --> </el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="danger" @click="deleteRow(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 30, address: '北京市朝阳区' }, { name: '李四', age: 25, address: '上海市浦东新区' }, { name: '王五', age: 18, address: '广州市天河区' } ] }; }, methods: { deleteRow(index, row) { this.tableData.splice(index, 1); // 手动将展开的行合闭 this.$refs.table.toggleRowExpansion(row, false); } } }; </script> ``` 在上述代码示例中，我们通过`toggleRowExpansion`方法手动将展开的行合闭，实现了删除展开行时，展开行自动合闭的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值