效果图
- 定义data和methods
data () {
return {
tableList: [],
tableList2: [],
ecuArr: [], // 合并ECU
ecuIndex: 0, // 合并ECU索 引
ecuArr2: [], // 合并ECU
ecuIndex2: 0 // 合并ECU索 引
}
},
mounted () {
this.getDetail()
},
methods: {
getDetail () {
const arr =
this.tableList = lodash.cloneDeep(arr)
this.tableList2 = lodash.cloneDeep(arr)
this.mergeInit(arr)
this.mergeInit2(arr)
},
// 合并表格
mergeInit (data) {
this.ecuArr = [];
this.ecuIndex = 0;
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.ecuArr.push(1);
this.ecuIndex = 0;
} else {
// 合并 RXSWIN子码
if (data[i].sourceEcuRxswin == data[i - 1].sourceEcuRxswin) {
this.ecuArr[this.ecuIndex] += 1;
this.ecuArr.push(0);
} else {
this.ecuArr.push(1);
this.ecuIndex = i;
}
}
}
}
},
// 合并表格
mergeInit2 (data) {
this.ecuArr2 = [];
this.ecuIndex2 = 0;
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.ecuArr2.push(1);
this.ecuIndex2 = 0;
} else {
// 合并 RXSWIN子码
if (data[i].targetEcuRxswin == data[i - 1].targetEcuRxswin) {
this.ecuArr2[this.ecuIndex2] += 1;
this.ecuArr2.push(0);
} else {
this.ecuArr2.push(1);
this.ecuIndex2 = i;
}
}
}
}
},
// 合并单元格
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
const len = this.tableList.length;
// const t = this.columns.length
if (columnIndex === 0) {
// 第一列 RXSWIN子码
const _row_1 = this.ecuArr[rowIndex];
const _col_1 = _row_1 > 0 ? 1 : 0;
return {
rowspan: _row_1,
colspan: _col_1
};
} else if (rowIndex === len) {
return {
rowspan: 1,
colspan: 1
}
}
},
// 合并单元格
arraySpanMethod2 ({ row, column, rowIndex, columnIndex }) {
const len = this.tableList2.length;
// const t = this.columns.length
if (columnIndex === 0) {
// 第一列 RXSWIN子码
const _row_1 = this.ecuArr2[rowIndex];
const _col_1 = _row_1 > 0 ? 1 : 0;
return {
rowspan: _row_1,
colspan: _col_1
};
} else if (rowIndex === len) {
return {
rowspan: 1,
colspan: 1
}
}
},
VDNRowClassName ({ row, column, rowIndex, columnIndex }) {
const { targetEcuRxswin, sourceEcuRxswin } = row
if (targetEcuRxswin != sourceEcuRxswin) {
if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2 || columnIndex == 3) {
return 'color_red'
}
}
},
}
- 在文件中使用
<el-row :gutter="20">
<el-col :span="12">
<el-table
:data="tableList"
border
:span-method="arraySpanMethod"
:cell-class-name="VDNRowClassName">
<el-table-column prop="sourceEcuRxswin" label="RXSWIN子码" width="150"></el-table-column>
<el-table-column prop="sourceEcuSwPum" label="ECU软件版本" width="120" show-overflow-tooltip></el-table-column>
<el-table-column prop="sourceSoftwareCompleteHash" label="HASH值" show-overflow-tooltip></el-table-column>
<el-table-column prop="sourceEcuName" label="ECU 名称" width="100" show-overflow-tooltip></el-table-column>
</el-table>
</el-col>
<el-col :span="12">
<el-table
:data="tableList2"
border
:span-method="arraySpanMethod2"
:cell-class-name="VDNRowClassName">
<el-table-column prop="targetEcuRxswin" label="RXSWIN子码" width="150"></el-table-column>
<el-table-column prop="targetEcuSwPum" label="ECU软件版本" width="120" show-overflow-tooltip></el-table-column>
<el-table-column prop="targetSoftwareCompleteHash" label="HASH值" show-overflow-tooltip></el-table-column>
<el-table-column prop="targetEcuName" label="ECU 名称" width="100" show-overflow-tooltip></el-table-column>
</el-table>
</el-col>
</el-row>
- css样式
::v-deep .el-table__body td.color_red {
color: #F56C6C !important;
height: 48px !important;
}
.color_red {
color: #F56C6C !important;
}
