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>