elementui表格内加树形

Element UI提供了el-table组件用于展示表格数据，如果需要在表格中加入树形结构，可以通过el-table-column的slot-scope属性来定制每一列的渲染内容。

首先，需要引入elementui的table组件和tree组件，可以在Vue的入口文件中导入相应的组件：

import { Table, TableColumn, Tree } from 'element-ui'

Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Tree)

然后，在组件的template中可以使用el-table和el-table-column来定义表格的结构。下面是一个例子：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 在这里可以根据树形的层级进行缩进 -->
          <span v-if="scope.row.level == 0">
            <!-- 根节点的操作按钮 -->
          </span>
          <span v-else>
            <!-- 子节点的操作按钮 -->
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

在上述代码中，我们通过slot-scope="scope"来获得当前行的数据，scope.row表示当前行的数据对象，可以在template中根据需要渲染树形结构的内容。

最后，需要在data中定义表格的数据，可以按照树形结构来组织数据。例如：

data() {
  return {
    tableData: [
      {
        name: '节点1',
        type: '分类',
        level: 0, // 根节点的层级为0
        children: [
          {
            name: '子节点1',
            type: '分类',
            level: 1, // 子节点的层级为1
            children: [
              {
                name: '子节点1-1',
                type: '分类',
                level: 2 // 孙子节点的层级为2
              }
            ]
          }
        ]
      },
      {
        name: '节点2',
        type: '分类',
        level: 0,
        children: [
          {
            name: '子节点2',
            type: '分类',
            level: 1
          }
        ]
      }
    ]
  }
}

通过以上代码，就可以在elementui表格中加入树形结构了。可以根据需要自定义树形结构的样式和交互行为。