Element中树形控件在项目中的实际应用

官网连接直达：Tree树形控件的使用

1、使用目的

用清晰的层级结构展示信息，可展开或折叠。

2、官网组件

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree><script>export default {data() {return {data: [{label: '一级 1',children: [{label: '二级 1-1',children: [{label: '三级 1-1-1'}]}]}, {label: '一级 2',children: [{label: '二级 2-1',children: [{label: '三级 2-1-1'}]}, {label: '二级 2-2',children: [{label: '三级 2-2-1'}]}]}, {label: '一级 3',children: [{label: '二级 3-1',children: [{label: '三级 3-1-1'}]}, {label: '二级 3-2',children: [{label: '三级 3-2-1'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleNodeClick(data) {console.log(data);}}};
</script>

3、组合使用组件案例

官网提供的不同类型的树形结构，里边的属性可以自己组合来满足自己的实际要求。可以根据参数的描述来进行使用设置。

4、在项目中实际应用

• 1、使用基础的树形结构
• 2、自定义节点内容，节点后添加操作【不同的层级对应不容的操作，实现是通过节后台接口返回的节点属性值】
• 3、优化节点点击展开的方式
• 4、实现属性结构的选择框，方便后续操作

expand-on-click-node ：是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

4.1 组合组件的使用

4.1.2 代码落地

    <el-treeshow-checkbox:data="menus":props="defaultProps":expand-on-click-node="false"node-key="catId"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-buttonv-if="node.level <= 2"type="text"size="mini"@click="() => append(data)">Append</el-button><el-buttonv-if="node.childNodes.length == 0"type="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree>

4.1.3 后台接口数据

树形结构的数据来自后台接口。后台要对数据进行组合后返回给前台。

4.1.4 实际效果