解决vue3+element-plus 使用table 展开行时,删除展开行中的数据,展开行自动合闭的问题
时间: 2023-06-04 10:05:25 浏览: 706
好的,这个问题我可以帮您解答。您可以在删除展开行的数据时,手动调用`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`方法手动将展开的行合闭,实现了删除展开行时,展开行自动合闭的效果。
阅读全文