首页el-tree当前选中的节点数据改变，刷新数据保持当前选中的数据选中状态不变，如何用代码实现

el-tree当前选中的节点数据改变，刷新数据保持当前选中的数据选中状态不变，如何用代码实现

时间: 2023-05-16 16:05:48 浏览: 404

可以使用 el-tree 的 setCurrentKey 方法来实现当前选中的节点数据改变后，保持当前选中的数据选中状态不变的功能。具体实现方法如下： 1. 在 el-tree 组件中，绑定一个 @node-click 事件，用于监听节点的点击事件。 2. 在事件处理函数中，获取当前点击的节点数据，并将其设置为当前选中的节点数据。 3. 在设置当前选中的节点数据后，调用 el-tree 的 setCurrentKey 方法，将当前选中的节点数据的 key 值作为参数传入。 4. 在 setCurrentKey 方法的回调函数中，重新获取 el-tree 的数据源，并将其设置为 el-tree 的数据源，从而实现刷新数据的功能。下面是示例代码： <template> <el-tree :data="treeData" :props="treeProps" :default-expand-all="true" :highlight-current="true" @node-click="handleNodeClick" ></el-tree> </template> <script> export default { data() { return { treeData: [ { id: 1, label: '节点1', children: [ { id: 2, label: '节点1-1', }, { id: 3, label: '节点1-2', }, ], }, { id: 4, label: '节点2', children: [ { id: 5, label: '节点2-1', }, { id: 6, label: '节点2-2', }, ], }, ], currentKey: null, }; }, computed: { treeProps() { return { label: 'label', children: 'children', }; }, }, methods: { handleNodeClick(data) { this.currentKey = data.id; this.$refs.tree.setCurrentKey(this.currentKey, () => { this.treeData = [...this.treeData]; }); }, }, }; </script>

阅读全文