VUE el-tabel嵌套循环

在Vue.js中，`el-table`是一个用于展示数据列表的组件，而嵌套循环通常用于处理表格中有层级结构的数据。当你需要在一个表格中显示多级关联的数据，比如一个员工列表，每个员工有姓名、职位以及一个部门，部门下面还有下属员工，这时就可以通过嵌套的`v-for`循环来实现。

假设你有一个员工数组（`employees`），每个员工对象包含`name`、`position`和`department`属性，其中`department`是一个嵌套的对象：

<template>
  <el-table :data="employees">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="position" label="职位"></el-table-column>
    <el-table-column label="部门">
      <template slot-scope="scope">
        <div v-for="(subEmployee, index) in scope.row.department.subEmployees" :key="index">
          {{ subEmployee.name }}
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      employees: [
        { name: '张三', position: '经理', department: { title: '销售部', subEmployees: [{ name: '小明' }, { name: '小红' }] } },
        // 其他员工数据...
      ]
    }
  }
}
</script>

在这个例子中，我们首先遍历外部的员工，然后在每个员工的“部门”列中，再遍历部门的`subEmployees`。这样就实现了嵌套的循环渲染。