皮皮奶 2024-06-14 11:51 采纳率: 33.3%
浏览 10
已结题

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

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>


输出的页面信息是这样的

img

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

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


  • 写回答

9条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-06-14 11:51
    关注

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

    要解决这个问题,首先需要理解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>
    

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

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

    <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就可以正确地渲染出每个科室及其对应的医生名单了。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(8条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 6月14日
  • 已采纳回答 6月14日
  • 创建了问题 6月14日

悬赏问题

  • ¥15 c# ReportDocument 类执行方法PrintToPrinter()方法时报错
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥20 双系统开机引导中windows系统消失问题?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方
  • ¥15 关于生产日期批次退货退款,库存回退的问题