el-tree选中要对数组添加一个数据,如果点击之前的取消怎么去删除当前的数据
时间: 2024-01-22 13:19:00 浏览: 122
在element-ui的el-tree组件中,可以通过监听节点选中事件`node-click`来实现此功能。当用户选中一个节点时,可以将该节点的数据存储到一个数组中。如果用户取消选中该节点,则可以从数组中删除该节点的数据。
以下是一个示例代码:
```html
<template>
<el-tree :data="data" :props="defaultProps" node-key="id" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
selectedNodes: [], // 存储选中节点的数据
data: [
{
id: 1,
label: '节点1'
},
{
id: 2,
label: '节点2'
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(node) {
// 判断节点是否已经选中
const index = this.selectedNodes.findIndex(selectedNode => selectedNode.id === node.id)
if (index !== -1) {
// 如果已经选中,则从数组中删除该节点的数据
this.selectedNodes.splice(index, 1)
} else {
// 如果未选中,则将该节点的数据存储到数组中
this.selectedNodes.push(node)
}
}
}
}
</script>
```
在上面的代码中,当用户点击一个节点时,会触发`handleNodeClick`方法。该方法首先判断该节点是否已经被选中,如果已经选中,则从数组中删除该节点的数据;如果未选中,则将该节点的数据存储到数组中。这样,当用户取消选中一个节点时,该节点的数据就会从数组中删除。
阅读全文