elementui树状图

以下是使用Element UI实现树状图的步骤：

1.首先需要在项目中安装Element UI，可以使用npm命令进行安装：

npm install element-ui --save

2.在Vue项目的入口文件main.js中引入Element UI并注册：

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

Vue.use(ElementUI)

3.在组件中使用el-tree标签来创建树状图，同时需要传入treeData属性来指定树状图的数据源：

<template>
  <el-tree :data="treeData"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          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'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

4.如果需要自定义树状图节点的内容，可以使用el-tree的scoped-slot来实现：

<template>
  <el-tree :data="treeData">
    <template v-slot="{ node, data }">
      <span v-if="data.level === 0">{{ data.label }}</span>
      <span v-else>{{ data.label }} - {{ data.desc }}</span>
    </template>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '一级 1',
          desc: '这是一级 1 的描述',
          children: [
            {
              label: '二级 1-1',
              desc: '这是二级 1-1 的描述',
              children: [
                {
                  label: '三级 1-1-1',
                  desc: '这是三级 1-1-1 的描述'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          desc: '这是一级 2 的描述',
          children: [
            {
              label: '二级 2-1',
              desc: '这是二级 2-1 的描述',
              children: [
                {
                  label: '三级 2-1-1',
                  desc: '这是三级 2-1-1 的描述'
                }
              ]
            },
            {
              label: '二级 2-2',
              desc: '这是二级 2-2 的描述',
              children: [
                {
                  label: '三级 2-2-1',
                  desc: '这是三级 2-2-1 的描述'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>