ElementUI树形控件实现：如何展开/折叠子节点

一、选取ElementUI树形控件

ElementUI的树形控件是一种用于显示层级结构数据的控件，用户可以方便的通过控制该控件的展开/折叠状态来进行数据的查看和操作。该控件可以大大简化开发中的树形结构页面的实现，减少开发时间和工作量。

代码：

<template>
  <el-tree :data="data" :props="defaultProps"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }]
    };
  },
  defaultProps: {
    children: 'children',
    label: 'label'
  }
};
</script>

二、使用ElementUI树形控件展开/折叠子节点

当ElementUI树形控件用于显示层级结构数据时，需要考虑如何方便用户进行展开/折叠操作。ElementUI提供了默认的展开/折叠操作，用户点击树节点前面的图标即可实现展开/折叠操作。

代码：

<template>
  <el-tree :data="data" :props="defaultProps"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }]
    };
  },
  defaultProps: {
    children: 'children',
    label: 'label'
  }
};
</script>

三、自定义ElementUI树形控件展开/折叠子节点

有时候默认的展开/折叠操作无法满足实际需求，此时可以通过自定义操作来实现更加灵活的展开/折叠操作。ElementUI的树形控件提供了通过slot来自定义操作的功能。

代码：

<template>
  <el-tree :data="data" :props="defaultProps">
    <span slot-scope="{ node, data }">
      <i v-if="node.children.length" class="el-icon-caret-right" :class="{\'is-opened\': node.expanded}" @click.stop="handleExpandClick(node, data)"></i>
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }]
    };
  },
  defaultProps: {
    children: 'children',
    label: 'label'
  },
  methods: {
    handleExpandClick(node, data) {
      node.expanded = !node.expanded;
    }
  }
};
</script>

四、ElementUI树形控件展开/折叠子节点的事件

在ElementUI的树形控件中，展开/折叠子节点的操作可以触发相应的事件，从而方便用户进一步的操作和处理。当一个节点被展开/折叠时，会触发节点的expand-change事件。

代码：

<template>
  <el-tree :data="data" :props="defaultProps" @expand-change="handleExpandChange"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }]
    };
  },
  defaultProps: {
    children: 'children',
    label: 'label'
  },
  methods: {
    handleExpandChange(node, data) {
      console.log(node, data);
    }
  }
};
</script>