methods:{
// 獲取表格數(shù)據(jù)
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;
//進(jìn)行解析數(shù)據(jù)
this.jiexi();
}
},
//合并裝備名稱相同的列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//rowIndex：行 columnIndex：列
let { tableData } = this;
if (columnIndex == 1) {//如果是列的下標(biāo)是1，進(jìn)行判斷如果有重復(fù)出現(xiàn)的裝備名稱就只顯示一個(gè)
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();
}
頁(yè)面
<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="序號(hào)"
></el-table-column>
<el-table-column
prop="C_EquipmentName"
label="裝備名稱"
></el-table-column>
</el-table>
