请用VUE写一个TABLE，能实现角色上下级树形展开和收缩，样式用前端ui库是element ui plus

好的，我可以给您提供一个基本的代码框架，您可以根据您的需求进行修改和优化。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table :data="props.row.children" style="width: 100%">
          <!-- 这里可以根据您的需求添加更多的列 -->
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="role" label="角色"></el-table-column>
          <el-table-column prop="action" label="操作"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <!-- 这里可以根据您的需求添加更多的列 -->
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="role" label="角色"></el-table-column>
    <el-table-column prop="action" label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click.stop="handleAdd(scope.$index, scope.row)">添加下级</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '管理员',
          role: '超级管理员',
          children: [
            {
              name: '操作员',
              role: '普通管理员',
              children: [
                {
                  name: '客服',
                  role: '普通管理员'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleAdd(index, row) {
      if (!row.children) {
        this.$set(row, 'children', []);
      }
      row.children.push({
        name: '新用户',
        role: '普通用户'
      });
    }
  }
}
</script>

这个代码框架中，我们使用了 Element UI 的 Table 和 Table Column 组件来实现表格的展示。其中，我们使用了 Table Column 的 type 属性来添加了一个展开/收缩的按钮。在展开的部分，我们又嵌套了一个 Table 组件来实现树形结构的展示。在数据方面，我们使用了一个数组来存储所有的数据，其中每个对象代表一个角色，包括名称、角色和子角色。在添加下级角色的时候，我们使用了 Vue 的 $set 方法来动态添加子角色。