element 表格动态合并列 并将合并的列加上背景色

 

 

 实现效果如上

<template>
  <div>
    <el-table
      :data="tableList"
      :span-method="spanMethods"
      :cell-style ="cellStyle"
      border
      style="width: 100%">
　　　　<el-table-column prop="quota1" label="项目"></el-table-column>
　　　　<el-table-column prop="quota2" label="子项"></el-table-column>
　　　　<el-table-column prop="quota3" label="指标量"></el-table-column>
　　　　<el-table-column prop="quota4" label="哈哈"></el-table-column>
    </el-table>
  </div>
</template>   
<script>
    export default{
        data(){
            return{
               tableList:[
　　　　　　　　　　　　{
　　　　　　　　　　　　　　quota1: '消防泵',
　　　　　　　　　　　　　　quota2: '品牌型号',
　　　　　　　　　　　　　　quota3: '卢森堡',
　　　　　　　　　　　　　　quota4: '卢森堡',
 
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　quota1: '消防泵',
　　　　　　　　　　　　　　quota2: '流量',
　　　　　　　　　　　　　　quota3: '167L/s',
　　　　　　　　　　　　　　quota4: '167L/s',
 
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　quota1: '消防炮',
　　　　　　　　　　　　　　quota2: '品牌型号',
　　　　　　　　　　　　　　quota3: '品牌型号',
　　　　　　　　　　　　　　quota4: '167L/s',
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　quota1: '消防炮',
　　　　　　　　　　　　　　quota2: '消防炮',
　　　　　　　　　　　　　　quota3: '167L/s',
　　　　　　　　　　　　　　quota4: '167L',
　　　　　　　　　　　　}
                ],
　　　　　　　　　　dataSolve:[]
            }
    },
　mounted(){
　　this.dataSolve = this.mergeTableRow(this.tableList, ["quota1", "quota2","quota3","quota4"])
　},
methods:{　　

//整理需合并的数据　　
//此数据为合并列数据　　

mergeTableRow(data, merge){　
　　　　if (!merge || merge.length === 0) {
　　　　　　return data;
　　　　}
　　　　data = data.forEach((v,index) =>{
　　　　　　const mList = {};//用以存放当前行所有非相同的val值
　　　　　　merge.forEach((m:any,i:any) =>{
　　　　　　　　const rowVal = v[m];
　　　　　　　　if(mList[rowVal] && mList[rowVal].newIndex === i){
　　　　　　　　　　//当mList中有["quota1", "quota2","quota3","quota4"]对应的val时，
　　　　　　　　　　//若key值对应的下标与mlist中该val值对应的newIndex相同时，说明上一个key值对应的val与现在的key值对应的val相同且连续
　　　　　　　　　　mList[rowVal]["num"]++;
　　　　　　　　　　mList[rowVal]["newIndex"]++;//用以判断下一项是否与当前项相同
　　　　　　　　　　//此时合并列
　　　　　　　　　　data[index][merge[mList[rowVal]["index"]]+ "-span"].colspan++;//相同val值，第一次出现的时候的colspan++
　　　　　　　　　　//当前列不显示
　　　　　　　　　　v[m + "-span"] = {
　　　　　　　　　　　　rowspan: 0,
　　　　　　　　　　　　colspan: 0,
　　　　　　　　　　};
　　　　　　　　}else{
　　　　　　　　　　//["quota1", "quota2","quota3","quota4"]对应的val 第一次放进mList
　　　　　　　　　　mList[rowVal] = {
　　　　　　　　　　　　num: 1,
　　　　　　　　　　　　index: i,
　　　　　　　　　　　　newIndex: i + 1,
　　　　　　　　　　};
　　　　　　　　　　v[m + "-span"] = {
　　　　　　　　　　　　rowspan: 1,
　　　　　　　　　　　　colspan: 1,
　　　　　　　　　　};
　　　　　　　　}
　　　　　　　　return v;
　　　　　　})
　　　　})
　　　　return data;

　},　//合并列

　　spanMethods({ row, column, rowIndex, columnIndex }){
　　　　console.log(arguments)
　　　　console.log(row,'row')
　　　　const span = column["property"] + "-span";
　　　　if (row[span]) {
　　　　　　return row[span];
　　　　}
　　},
　　//将已合并的列，添加背景色等样式
　　cellStyle({row, column, rowIndex, columnIndex}){
　　　　for (const key in row) {
　　　　　　if(row[key].colspan && row[key].colspan > 1){
　　　　　　　　if(column.property+'-span' === key){
　　　　　　　　　　return 'background:red;color:blue;text-align:center'
　　　　　　　　}
　　　　　　}
　　　　}
　　}



}
</script>