ElementUI之Tree树形控件使用

以下是一个使用ElementUI的Tree树形控件的基本示例，展示了如何在Vue.js项目中集成和使用它。

首先，确保你已经安装了ElementUI：

npm install element-ui --save

然后，在你的Vue组件中引入和使用Tree控件：

<template>
  <el-tree
    :data="data"
    show-checkbox
    node-key="id"
    default-expand-all
    :props="defaultProps">
  </el-tree>
</template>
 
<script>
import 'element-ui/lib/theme-chalk/index.css';
import { Tree } from 'element-ui';
 
export default {
  components: {
    'el-tree': Tree
  },
  data() {
    return {
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        // 更多树节点...
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>

在这个例子中，我们定义了一个树形结构的数据data，并通过el-tree组件展示出来。我们使用node-key来指定每个树节点的唯一标识，并且设置default-expand-all属性来展开所有节点。defaultProps定义了如何访问节点的子节点和标签。

确保在你的Vue项目的入口文件（通常是main.js或app.js）中引入ElementUI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

现在你可以在你的Vue组件中像上面示例中那样使用Tree控件了。