首页el-tree回显数据选中

el-tree回显数据选中

时间: 2024-12-28 22:10:49 浏览: 100

在Element UI的el-tree组件中，回显数据并选中某个节点通常涉及到两个步骤：首先设置树的数据结构，然后在渲染时指定选中的节点。这里是一个简单的示例： 1. 首先，你需要有一个数据数组，每个元素都有`children`和`id`属性（`id`用于标识节点），例如： ```javascript const data = [ { id: '1', label: '父节点1', children: [ { id: '1-1', label: '子节点1-1' }, { id: '1-2', label: '子节点1-2', checked: true } // 假设你想要默认选中这个子节点 ] } ]; ``` 2. 在初始化el-tree时，你可以通过`default-checked-keys`选项来设置初始选中的节点，或者通过`@check-change`事件监听器来动态控制选中状态： ```html <template> <el-tree :data="data" ref="tree" :default-checked-keys="['1-2']"  @check-change="handleCheckChange" ></el-tree> </template> <script> export default { methods: { handleCheckChange(node) { this.$refs.tree.setCheckedKeys([node.id]); // 更新选中状态 } } } </script> ``` 当你需要显示预加载的回显数据时，只需将数据结构设置好，el-tree会自动递归地渲染节点。

阅读全文