请用VUE写一个TABLE，能实现角色上下级展开和收缩，样式用element ui

好的，我可以为您提供一个基本的示例代码，如下所示：

<template>
  <el-table :data="tableData" border>
    <el-table-column prop="name" label="角色名称"></el-table-column>
    <el-table-column prop="level" label="角色级别"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="{row}">
        <el-button size="mini" type="primary" @click="toggleChildren(row)">
          {{row.showChildren ? '收起' : '展开'}}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column prop="description" label="角色描述"></el-table-column>
    <template slot-scope="{row}">
      <el-table-column v-if="row.showChildren" label="下级角色">
        <el-table :data="row.children" border>
          <el-table-column prop="name" label="角色名称"></el-table-column>
          <el-table-column prop="level" label="角色级别"></el-table-column>
          <el-table-column prop="description" label="角色描述"></el-table-column>
        </el-table>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'CEO',
          level: '1',
          description: '公司最高领导',
          showChildren: false,
          children: [
            {
              name: 'CTO',
              level: '2',
              description: '技术总监',
            },
            {
              name: 'COO',
              level: '2',
              description: '运营总监',
            },
          ],
        },
        {
          name: '技术部门',
          level: '1',
          description: '负责公司技术相关工作',
          showChildren: false,
          children: [
            {
              name: '研发部门',
              level: '2',
              description: '负责公司产品研发',
              showChildren: false,
              children: [
                {
                  name: '后端研发',
                  level: '3',
                  description: '负责公司后端开发',
                },
                {
                  name: '前端研发',
                  level: '3',
                  description: '负责公司前端开发',
                },
              ],
            },
            {
              name: '测试部门',
              level: '2',
              description: '负责公司产品测试',
            },
          ],
        },
        {
          name: '市场部门',
          level: '1',
          description: '负责公司市场推广工作',
        },
      ],
    };
  },
  methods: {
    toggleChildren(row) {
      row.showChildren = !row.showChildren;
    },
  },
};
</script>

这是一个基本的 TABLE，其中包含两个级别的角色，可以展开和收缩下级角色。在该示例中，我们使用了 element ui 中的 el-table 和 el-table-column 组件，以及 Vue.js 的 slot-scope 和 v-if 指令，以实现上下级角色的展开和收缩。同时，我们在数据源中添加了一个 showChildren 属性来控制下级角色的显示和隐藏。