methods:{
// 获取表格数据
async getTableData() {
// 表格查询
let data = {
dealId: "selectDetial",
pageInfo: this.pageInfo,
selectForm: this.selectForm,
};
let res = await getTableInfo(data);
if (res.status == true) {
this.tableData = res.msg.resultList;
this.pageInfo.total = res.msg.totalCount;
//进行解析数据
this.jiexi();
}
},
//合并装备名称相同的列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//rowIndex:行 columnIndex:列
let { tableData } = this;
if (columnIndex == 1) {//如果是列的下标是1,进行判断如果有重复出现的装备名称就只显示一个
if (row.showEquipment) {
return {
rowspan: this.tempDetailslistMonth[tableData[rowIndex].C_EquipmentName],
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
},
jiexi(){
let tempDetailslistMonth = {};
this.tableData.map((item) => {
if (tempDetailslistMonth[item.C_EquipmentName]) {
tempDetailslistMonth[item.C_EquipmentName]++;
item.showEquipment = false;
return item;
} else {
tempDetailslistMonth[item.C_EquipmentName] = 1;
item.showEquipment = true;
return item;
}
});
this.tempDetailslistMonth = tempDetailslistMonth;
}
},
created(){
this.getTableData();
}
页面
<el-table
:border="true"
:span-method="objectSpanMethod"
:row-class-name="tableRowClassName"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%; background: #003629"
>
<el-table-column
type="index"
:index="indexMethod1"
label="序号"
></el-table-column>
<el-table-column
prop="C_EquipmentName"
label="装备名称"
></el-table-column>
</el-table>