elementui里面的树形控件

### ElementUI 树形控件使用教程 #### 1. 基础配置与引入 为了在项目中使用 `el-tree` 控件，需先安装并引入 Element UI 库。如果采用按需加载的方式，则只需单独引入所需的组件即可。 ```javascript import { Tree } from 'element-ui'; Vue.use(Tree); ``` #### 2. 数据准备 树形结构的数据通常由节点对象数组构成，每个节点可以拥有子节点属性 `children` 来表示下一层级的内容[^1]。 ```json [ { "label": "一级 1", "children": [ {"label": "二级 1-1"}, {"label": "二级 1-2"} ] }, ... ] ``` #### 3. HTML 结构定义 通过 `<el-tree>` 标签创建树形控件实例，并绑定数据源以及设置其他必要参数。 ```html <template> <div class="demo"> <el-tree :data="data" show-checkbox node-key="id"></el-tree> </div> </template> <script> export default { data() { return { data: [{ label: '一级 1', children: [{ label: '二级 1-1' }, { label: '二级 1-2' }] }] }; } }; </script> ``` #### 4. 属性说明 | 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | data | Array<Object> | [] | 配置项，指定树状图显示的数据集 | | props | Object | {} | 自定义属性映射关系，默认为 `{value:'id', label:'label'}`| | check-on-click-node | Boolean | false | 是否允许点击节点时触发选中事件 | 对于更复杂的场景，比如需要支持多选框的树形菜单或多级联动效果，可以通过自定义插槽来自定义渲染逻辑，同时利用 `check-change` 等事件监听器处理交互行为[^2]。 #### 5. 实现多级联动 当涉及到父子节点之间的关联操作时，可以在父节点的选择状态发生变化时自动调整其所有后代节点的状态；反之亦然。这可通过监听 `node-click` 或者 `check-change` 事件来完成。 ```javascript methods: { handleCheckChange(data, checked, indeterminate) { this.$refs.tree.store.setCheckedKeys([]); if (checked) { const keys = []; function traverse(node){ keys.push(node.id); if(node.children && node.children.length > 0){ node.children.forEach(traverse); } } traverse(data); this.$refs.tree.setCheckedKeys(keys); } } } ``` #### 6. 添加增删改功能 为了让用户能够直接修改树中的信息，在模板内添加按钮用于执行这些动作，并相应地编写 JavaScript 方法来进行实际的操作。注意要同步更新视图和后台存储的数据[^3]。 ```html <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <span> <el-button type="text" size="mini">Append</el-button> <el-button @click.stop.prevent="remove(node,data)" type="text" size="mini">Delete</el-button> </span> </span> ``` ```javascript append(data) { const newChild = { id: id++, label: 'testtest', children: [] }; if (!data.children) { this.$set(data, 'children', []); } data.children.push(newChild); }, remove(node, data) { const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex(d => d.id === data.id); children.splice(index, 1); } ```