Element UI 树形组件使用教程 - 展示、展开、选中、自定义节点

<p>Element UI 提供了 Tree 组件来实现树形结构的展示和交互。本文将介绍 Tree 组件的使用方法，包括展示树形结构、展开和收起节点、选中节点、自定义节点内容等。同时，还会提供一些代码示例和常用属性和方法。</p>
<h2>1. 引入 Tree 组件</h2>
<p>在需要使用 Tree 组件的地方，引入 Tree 组件：</p>
<pre><code class="language-html"><template>
  <el-tree :data="data"></el-tree>
</template>
<script>
import { Tree } from 'element-ui';

export default {
  components: {
    'el-tree': Tree,
  },
  data() {
    return {
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                },
                {
                  label: '三级 1-1-2'
                }
              ]
            },
            {
              label: '二级 1-2',
              children: [
                {
                  label: '三级 1-2-1'
                },
                {
                  label: '三级 1-2-2'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                },
                {
                  label: '三级 2-1-2'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                },
                {
                  label: '三级 2-2-2'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script></code></pre>
<h2>2. 展开和收起节点</h2>
<p>可以通过设置<code>default-expand-all</code>属性为true来默认展开所有节点，也可以通过设置节点的<code>expand</code>属性来控制展开和收起：</p>
<pre><code class="language-html"><el-tree :data="data" :default-expand-all="true"></el-tree></code></pre>
<pre><code class="language-html"><el-tree :data="data" @node-click="handleNodeClick"></el-tree>
<script>
export default {
  data() {
    return {
      data: [
        {
          label: '一级 1',
          expand: true,
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                },
                {
                  label: '三级 1-1-2'
                }
              ]
            },
            {
              label: '二级 1-2',
              children: [
                {
                  label: '三级 1-2-1'
                },
                {
                  label: '三级 1-2-2'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                },
                {
                  label: '三级 2-1-2'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                },
                {
                  label: '三级 2-2-2'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick(data) {
      data.expand = !data.expand;
    }
  }
}
</script></code></pre>
<h2>3. 选中节点</h2>
<p>设置<code>show-checkbox</code>属性为true来显示选择框，设置<code>default-checked-keys</code>属性来默认选中节点，监听<code>check-change</code>事件来处理选中节点的变化：</p>
<pre><code class="language-html"><el-tree :data="data" show-checkbox :default-checked-keys="['1-2-2']" @check-change="handleCheckChange"></el-tree>
<script>
export default {
  data() {
    return {
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                },
                {
                  label: '三级 1-1-2'
                }
              ]
            },
            {
              label: '二级 1-2',
              children: [
                {
                  label: '三级 1-2-1'
                },
                {
                  label: '三级 1-2-2'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                },
                {
                  label: '三级 2-1-2'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                },
                {
                  label: '三级 2-2-2'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleCheckChange(data, node) {
      console.log(data, node);
    }
  }
}
</script></code></pre>
<h2>4. 自定义节点内容</h2>
<p>可以通过<code>slot-scope</code>来自定义节点的内容，例如：</p>
<pre><code class="language-html"><el-tree :data="data">
  <template slot-scope="{ node }">
    <span class="custom-node">{{ node.label }} (自定义)</span>
  </template>
</el-tree></code></pre>
<h2>5. 其他常用属性和方法</h2>
<ul>
  <li><code>highlight-current</code>: 是否高亮当前选中节点，默认为false。</li>
  <li><code>current-node-key</code>: 当前选中节点的key值。</li>
  <li><code>filter-node-method</code>: 自定义过滤节点的方法。</li>
  <li><code>updateKeyChildren</code>: 更新指定节点的子节点数据。</li>
  <li><code>setCheckedKeys</code>: 设置选中的节点。</li>
  <li><code>getCheckedKeys</code>: 获取选中的节点。</li>
  <li><code>getCheckedNodes</code>: 获取选中的节点数据。</li>
  <li><code>setChecked</code>: 设置指定节点的选中状态。</li>
</ul>
<p>更多属性和方法可以参考 Element UI 官方文档：<a href="https://element.eleme.cn/#/zh-CN/component/tree" target="_blank">https://element.eleme.cn/#/zh-CN/component/tree</a></p>