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

Posted 2022-03-05 rainux.

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)
//对某项进行操作，可以拿到这一行信息

附录

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