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

好的，这是一个简单的示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>职位</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>
            <span :class="{ 'has-children': item.children }" @click="toggleChildren(item)">
              {{ item.name }}
            </span>
          </td>
          <td>{{ item.jobTitle }}</td>
        </tr>
        <tr v-if="!tableData.length">
          <td colspan="2">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '张三',
          jobTitle: '总经理',
          children: [
            { id: 2, name: '李四', jobTitle: '副总经理' },
            { id: 3, name: '王五', jobTitle: '部门经理' }
          ]
        }
      ]
    }
  },
  methods: {
    toggleChildren(item) {
      if (item.children) {
        item.children = null
      } else {
        item.children = [
          { id: 4, name: '赵六', jobTitle: '员工' },
          { id: 5, name: '钱七', jobTitle: '员工' }
        ]
      }
    }
  }
}
</script>

<style>
.has-children {
  cursor: pointer;
}

.has-children:before {
  content: '▶';
  display: inline-block;
  transform: rotate(90deg);
  margin-right: 5px;
}

.has-children.open:before {
  transform: rotate(0deg);
}
</style>

这里的思路是在表格中的每一行数据后面加上一个展开/收缩按钮，点击按钮可以控制下级菜单的显示和隐藏。在 `tableData` 数组中，每个对象代表一行表格数据，其中如果有子节点，就在该对象中添加一个 `children` 属性，存放子节点的数据。点击展开/收缩按钮时，会通过 `toggleChildren` 方法来控制对应对象的 `children` 属性的值，从而控制子节点的显示和隐藏。同时，通过在 `span` 标签上动态绑定 `class` 来实现展开/收缩按钮的样式变化。