<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;
　　　　}
　　　　merge.forEach((m) => {
          console.log(m)
          const mList = {};
          
          data = data.map((v:any, index:any) => {
              if (mList[rowVal] && mList[rowVal].newIndex === index) {
                  mList[rowVal]["num"]++;
                  mList[rowVal]["newIndex"]++;
                  data[mList[rowVal]["index"]][m + "-span"].rowspan++;
                  v[m + "-span"] = {
                      rowspan: 0,
                      colspan: 0,
                  };
              } else {
                  mList[rowVal] = {
                      num: 1,
                      index: index,
                      newIndex: index + 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].rowspan && row[key].rowspan > 1){
　　　　　　　　if(column.property+‘-span‘ === key){
　　　　　　　　　　return ‘background:red;color:blue;text-align:center‘
　　　　　　　　}
　　　　　　}
　　　　}
　　}
}
</script>