1.如图:
方法:objectSpanMethod() + rowSpan(),其中获取表格数据之后再调用rowSpan()
<el-table
highlight-current-row
:data="DRD_EFaultMode_tableData"
:span-method="objectSpanMethod"
border
style="width: 100%">
<el-table-column
prop="EFaultComponent"
label="所属部件"
align="center"
width="">
</el-table-column>
<el-table-column
prop="EFaultModeName"
label="异常模式"
align="center"
width="">
</el-table-column>
<el-table-column
prop="RELIABLITY"
align="center"
label="置信度">
</el-table-column>
<el-table-column
prop="Harmgrade"
align="center"
label="严重程度">
</el-table-column>
</el-table>
script:
<script>
export default {
data() {
return {
DRD_EFaultMode_tableData:[],: [],
spanArr : [],//在data里面定义
position : 0, //在data里面定义
}
},
mounted: function(){
this.loadDatas(); //获取表格数据
},
methods: {
loadDatas(){
this.DRD_EFaultMode_tableData = datas[1].efaults[0].efaults;
this.rowSpan();//获取表格数据之后,调用此方法
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if(columnIndex === 0){ //项目列也进行合并(第1列)
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
rowSpan() {
this.spanArr = [];//在data里面定义
this.position = 0; //在data里面定义
this.DRD_EFaultMode_tableData.forEach((item,index) => {
if( index === 0){
this.spanArr.push(1);
this.position = 0;
// item.sequence=index+1;//设置序号
}else{
if(this.DRD_EFaultMode_tableData[index].EFaultComponent ===
this.DRD_EFaultMode_tableData[index-1].EFaultComponent ){
this.spanArr[this.position] += 1;//连续有几行项目名名称相同
this.spanArr.push(0); // 名称相同后往数组里面加一项0
}else{
this.spanArr.push(1);
this.position = index;
}
}
})
},
}
}
</script>
2.script:
<script>
export default {
data() {
return {
DRD_EFaultMode_tableData:[],: [],
}
},
mounted: function(){
this.loadDatas(); //获取表格数据
},
methods: {
loadDatas(){
this.DRD_EFaultMode_tableData = datas[1].efaults[0].efaults;
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 3) {
let _row = 0;
let _col = 0;
if(rowIndex == 0){
_row = this.DRD_EFaultMode_tableData.length;
_col = _row>0 ? 1 : 0;
}else{
_row = 0;
_col = _row>0 ? 1 : 0;
}
return {
rowspan: _row,
colspan: _col
}
}
},
}
}
</script>