Code Is Never Die !
功能实战化
博主已在工作项目中亲身使用,确保只要按照这种方法肯定能使用,项目中使用,可以和后台提前沟通好数据格式,这样确保万无一失!
附录项目中真实数据和展现情况!
实现功能
构建一个表格,能够实现一对多的情况,例如国家信息安全漏洞共享平台总结周度漏洞反馈情况,一些实力较强的公司(启安信、启明星辰等)可能贡献颇多,在以表格形式列举报表时,需要一对多的展现形式:
实现代码(详细)
模板字符串部分
<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){
//对某项进行操作,可以拿到这一行信息
}
附录
目前后端只返回一个一对多数据