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

文章目录

• • 1、使用目的
  • 2、官网组件
  • 3、组合使用组件案例
  • 4、在项目中实际应用
  • • 4.1 组合组件的使用
    • 4.1.2 代码落地
    • 4.1.3 后台接口数据
    • 4.1.4 实际效果

官网连接直达：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-tree
      show-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-button
            v-if="node.level <= 2"
            type="text"
            size="mini"
            @click="() => append(data)"
          >
            Append
          </el-button>
          <el-button
            v-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 实际效果