el-table输入多维数组怎么实现

Question

el-table怎么输出多维数组中的单个数据

前端
<template>
    <el-table width="100%" :data="arr" >
      <el-table-column label="医生排班信息" >
        <el-table-column label="科室" >
        <template v-for="(list,index) in arr">
          <template v-for="listKS in list.ms_ghks2List">
              {{listKS}}
          </template>
        </template>
        </el-table-column>
        <el-table-column label="日期">
          <el-table-column label="上午值班"  />
          <el-table-column label="午间值班"  />
          <el-table-column label="下午值班"  />
          <el-table-column label="晚间值班"  />
        </el-table-column>
      </el-table-column>

    </el-table>

输出的页面信息是这样的

想要输出成左边全是单个科室,右边是对应的姓名
数组组成大概是

arr:[{"ghxe":24,
"list1":[{"ksmc":呼吸门诊}],
"list2":[{"ysxm":xxx"},{ysxm":xxx2}],
}，{"ghxe":25,
"list1":[{"ksmc":泌尿门诊}],
"list2":[{"ysxm":xx"},{ysxm":xx2}],
}]

Answer 1

引自免费微信小程序：皆我百晓生

要解决这个问题，首先需要理解el-table的结构和如何正确地映射多维数组到表格中。在你提供的代码中，尝试直接在el-table-column内部使用v-for循环来显示数据，但这种方式并不正确，因为el-table-column本身不支持嵌套的v-for循环。正确的做法是为每一列定义一个prop属性，指向数据对象的属性，并使用scoped slot来处理更复杂的数据渲染。

根据你提供的数组结构和需求，我们可以这样修改你的模板和逻辑：

<template>
  <el-table :data="arr">
    <!-- 科室列 -->
    <el-table-column prop="list1.ksmc" label="科室"></el-table-column>
    <!-- 姓名列 -->
    <el-table-column label="姓名">
      <!-- 使用 scoped slot 来遍历每个医生的名字 -->
      <template #default="{ row }">
        <template v-for="doctor in row.list2">
          {{ doctor.ysxm }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          ghxe: 24,
          list1: [{ ksmc: '呼吸门诊' }],
          list2: [{ ysxm: 'Doctor1' }, { ysxm: 'Doctor2' }],
        },
        {
          ghxe: 25,
          list1: [{ ksmc: '泌尿门诊' }],
          list2: [{ ysxm: 'Doctor3' }, { ysxm: 'Doctor4' }],
        },
      ],
    };
  },
};
</script>

但是，从你的数据结构来看，list1和list2的长度可能不一致，且你可能需要每个科室对应其所有的医生。在这种情况下，我们可以通过计算属性或方法来整理数据，确保每个科室都有其对应的医生列表。

下面是一个更完整的示例，使用计算属性来扁平化数据：

<template>
  <el-table :data="flatData">
    <el-table-column prop="ksmc" label="科室"></el-table-column>
    <el-table-column label="姓名">
      <template #default="{ row }">
        <template v-for="doctor in row.doctors">
          {{ doctor }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        // ... your original data ...
      ],
    };
  },
  computed: {
    flatData() {
      const result = [];
      this.arr.forEach(item => {
        item.list1.forEach(dept => {
          const doctors = item.list2.map(doctor => doctor.ysxm);
          result.push({ ksmc: dept.ksmc, doctors });
        });
      });
      return result;
    },
  },
};
</script>

在这个示例中，flatData计算属性会将原始的多维数组转换为一个扁平化的数组，其中每个对象包含一个科室名称和一个医生名字的数组。这样，el-table就可以正确地渲染出每个科室及其对应的医生名单了。