el-tree按照用户勾选的顺序记录节点
在 Element UI 的 el-tree 组件中，默认情况下获取的选中节点数组是没有顺序的。如果你需要按照用户勾选的顺序记录节点，可以通过以下方法实现：
<template><el-treeref="tree":data="data"show-checkboxnode-key="id"@check-change="handleCheckChange"></el-tree><div>勾选顺序: {{ checkedOrder.join(', ') }}</div>
</template><script>
export default {data() {return {data: [// 你的树数据],checkedOrder: [], // 存储勾选顺序checkedSet: new Set() // 用于快速判断节点是否已记录};},methods: {handleCheckChange(node, checked) {if (checked) {// 如果是勾选且尚未记录if (!this.checkedSet.has(node.id)) {this.checkedOrder.push(node.id);this.checkedSet.add(node.id);}} else {// 如果是取消勾选const index = this.checkedOrder.indexOf(node.id);if (index > -1) {this.checkedOrder.splice(index, 1);this.checkedSet.delete(node.id);}}},getCheckedNodesInOrder() {// 按照勾选顺序获取节点return this.checkedOrder.map(id => {return this.$refs.tree.getNode(id).data;});}}
};
</script>
