解决vue3+element-plus 使用table 展开行时,删除或更新展开行中的数据,展开行自动合闭的问题
解决vue3+element-plus 使用table 展开行时,删除或更新展开行中的数据,展开行自动合闭的问题问题描述解决方法问题描述在使用element-plus 中的table 展开行时,会有这种需求:修改完数据之后,可以直接在展开行中显示出最新的数据。我一般通过修改自定义模板(slot)的参数(即下图中的props)来达到这一目的,而不是重新请求数据。项目代码和上面截图中代码类似。测试时发
·
问题描述
在使用element-plus 中的table 展开行时,会有这种需求:修改完数据之后,可以直接在展开行中显示出最新的数据。
我一般通过修改自定义模板(slot)的参数(即下图中的props)来达到这一目的,而不是重新请求数据。
项目代码和上面截图中代码类似。测试时发现添加或删除展开行中数据时,展开行会自动关闭,通过$refs 也无法获取展开行中元素。
解决方法
可以通过给table 元素添加row-key 属性来优化表格的渲染。
<template>
<el-table :data="tableData" row-key="id" style="width: 100%">
<el-table-column type="expand">
<template #default="props">
<p>State: {{ props.row.state }}</p>
</template>
</el-table-column>
<el-table-column label="Date" prop="date" />
<el-table-column label="Name" prop="name" />
</el-table>
</template>
<script lang="ts">
export default {
data() {
return {
tableData: [
{
id: 1,
date: '2016-05-03',
name: 'Tom',
state: 'California'
},
{
id: 2,
date: '2017-07-01',
name: 'Bob',
state: 'California'
}
]
}
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)