element-ui tree组件 选择框取消选中后 ,还是默认之前的数据
时间: 2024-03-12 19:48:03 浏览: 83
element-ui tree组件的选择框取消选中后,如果想要将数据还原到之前的状态,可以使用以下方法:
1. 在取消选中时,保存当前的选中状态;
2. 在确认保存或者取消操作时,将保存的选中状态还原到之前的状态。
具体实现可以参考以下代码示例:
```
<template>
<el-tree
:data="data"
:props="defaultProps"
:default-checked-keys="defaultCheckedKeys"
:default-expanded-keys="defaultExpandedKeys"
node-key="id"
@check-change="handleCheckChange"
></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 11,
label: '二级 1-1',
},
{
id: 12,
label: '二级 1-2',
},
],
},
{
id: 2,
label: '一级 2',
children: [
{
id: 21,
label: '二级 2-1',
},
{
id: 22,
label: '二级 2-2',
},
],
},
],
defaultProps: {
children: 'children',
label: 'label',
},
defaultCheckedKeys: [],
defaultExpandedKeys: [],
originCheckedKeys: [], // 保存原始选中状态
};
},
methods: {
handleCheckChange(data, checked) {
if (checked) {
this.defaultCheckedKeys = data.checkedKeys;
} else {
this.originCheckedKeys = data.checkedKeys;
}
},
handleCancel() {
this.defaultCheckedKeys = this.originCheckedKeys;
},
handleSave() {
// 处理保存操作
},
},
};
</script>
```
在上述代码中,我们通过监听`check-change`事件来保存当前的选中状态。在取消操作中,我们将保存的选中状态还原到之前的状态;在保存操作中,我们可以将当前的选中状态保存到后端或者进行其他处理。
希望这个回答可以帮助到你。如果还有疑问,请随时提出。
阅读全文