构建一个表格，能够实现一对多的数据形式（已自用于项目），形象而便于使用

Code Is Never Die !

本功能测试依托于Vue渐进式框架、Iview组件库。

功能实战化

博主已在工作项目中亲身使用，确保只要按照这种方法肯定能使用，项目中使用，可以和后台提前沟通好数据格式，这样确保万无一失！
附录项目中真实数据和展现情况！

实现功能

构建一个表格，能够实现一对多的情况，例如国家信息安全漏洞共享平台总结周度漏洞反馈情况，一些实力较强的公司（启安信、启明星辰等）可能贡献颇多，在以表格形式列举报表时，需要一对多的展现形式：

实现代码（详细）

模板字符串部分

<Table
   height="318"
   border
   // 关键处理行、列关系
   :span-method="handleSpan"
   align="center"
   // 表头
   :columns="columns1"
   :data="processList">
      <template slot-scope="{ row, index }" slot="view">
          <span class="alianjie" @click="getcourse(row)">{{row.process_name}}</span>
      </template>
</Table>

引入lodash工具

import _ from "lodash"; // 包含很多方法很实用！

data部分

processList: [],
// 表头内容
columns1: [
  { title: "应用名", key: "appname", align: "center" },
  { title: "进程名", slot: "view", align: "center" },
  { title: "pid", key: "pid", align: "center" },
],

created部分

// 初始化表格
created() {
  this.getExProcess();
},

methods部分

// 初始化数据并处理行列关系
getExProcess() {
	// 一对多的在同一个数组包裹中
    this.processList = [
        [{ appname: "应用1", process_name: "进程1", pid: 1 }],
        [{ appname: "应用2", process_name: "进程2", pid: 2 }],
        [
        { appname: "应用3", process_name: "进程3", pid: 3 },
        { appname: "应用3", process_name: "进程4", pid: 4 },
        ],
        [
        { appname: "应用4", process_name: "进程5", pid: 5 },
        { appname: "应用3", process_name: "进程6", pid: 6 },
        ],
        [
        { appname: "应用5", process_name: "进程7", pid: 7 },
        { appname: "应用3", process_name: "进程8", pid: 8 },
        ],
        [
        { appname: "应用6", process_name: "进程9", pid: 9 },
        { appname: "应用4", process_name: "进程10", pid: 10 },
        ],
    ];
    this.processList.forEach((Item) => {
        Item.forEach((item, index) => {
            if (index == 0) {
                Object.assign(item, { rowSpan: Item.length, colSpan: 1 });
            } else {
                Object.assign(item, { rowSpan: 0, colSpan: 0 });
            }
        });
    });
    this.processList = _.flattenDeep(this.processList);
    console.log(this.processList);
},
// 处理合并进程表格
handleSpan({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0 && row) {
        return [row.rowSpan, row.colSpan];
    }
},
getcourse(row){
//对某项进行操作，可以拿到这一行信息
}

附录

目前后端只返回一个一对多数据