element表格列相同值自动合并单元格 多列

element表格列相同值自动合并单元格 多列

合并单元格需要在你数据渲染以后在去进行使用封装方法才可以生效！！！！
数据结构以及声明

 TableArr:[
          {x1:'xx车管所1',x2:'xxx查验岗',x3:'张三',x4:'42',x5:'51',x6:'61'},
          {x1:'xx车管所1',x2:'xxx查验岗',x3:'张四',x4:'42',x5:'52',x6:'62'},
          {x1:'xx车管所1',x2:'xxx查验岗',x3:'张五',x4:'43',x5:'53',x6:'63'},
          {x1:'xx车管所2',x2:'xxx受理岗',x3:'张三',x4:'44',x5:'54',x6:'65'},
          {x1:'xx车管所2',x2:'xxx受理岗',x3:'张四',x4:'45',x5:'55',x6:'65'},
          {x1:'xx车管所',x2:'xxx管理岗',x3:'张三',x4:'46',x5:'56',x6:'66'},
          {x1:'xx车管所',x2:'xxx管理岗',x3:'张四',x4:'47',x5:'57',x6:'67'},
          {x1:'xx车管所',x2:'xxx管理岗',x3:'张五',x4:'48',x5:'58',x6:'68'},
          {x1:'xx车管所',x2:'xxx车查验岗',x3:'张三',x4:'49',x5:'59',x6:'69'},
        ],
        spanObj:{},

封装方法

// 表格单元格合并多列
let [spanObj, pos] = [{}, {}];
//spanObj 存储每个key 对应的合并值
//pos  存储的是 key合并值得索引 大概吧
const dataMethod = (data, isH = []) => {
  //循环数据
  for (let i in data) {
    let dataI = data[i];
    //循环数据内对象，查看有多少key
    for (let j in dataI) {
      //如果只有一条数据时默认为1即可，无需合并
      if (~~i === 0) {
        spanObj[j] = [1];
        pos[j] = 0;
      } else {
        let [e, k] = [dataI, data[i - 1]];
        //判断上一级别是否存在 ，
        //存在当前的key是否和上级别的key是否一样
        //判断是否有数组规定只允许那几列需要合并单元格的
        if (k && e[j] === k[j] && (!isH?.length || isH.includes(j))) {
          //如果上一级和当前一级相当，数组就加1 数组后面就添加一个0
          spanObj[j][pos[j]] += 1;
          spanObj[j].push(0);
        } else {
          spanObj[j].push(1);
          pos[j] = i;
        }
        console.log(e, k);
      }
    }
  }
  return spanObj;
};

export { dataMethod };

使用只需要在引入后初始化使用即可。第一个值是数组，第二个值是 是否需要合并的key，全部都需要不填即可
spanObj 先声明在data

this.spanObj = dataMethod(this.TableArr,['x2','x1']);
//this.spanObj = dataMethod(this.TableArr);

在table 添加 span-method 合并方法

<el-table
  :data="tableData"
  :span-method="objectSpanMethod"
>
	...
</el-table>

span-method 循环从左到右从上到下的顺序

objectSpanMethod({ row, column, rowIndex, columnIndex }){
        // console.log({ row, column, rowIndex, columnIndex },'合并表格')
        //判断合并列
        let _row = this.spanObj[column.property][rowIndex]
        let _col = _row>0?1:0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }

如果你需要根据某个字段来进行合并可以 objectSpanMethod
根据表格x6合并逻辑 来合并 x2 的数据

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log({ row, column, rowIndex, columnIndex },'合并表格')
      //判断合并列
      let property = column.property;
      if (property === 'x6') {
        property = 'x2';
      }
      let _row = this.spanObj[property][rowIndex];
      let _col = _row > 0 ? 1 : 0;
      return {
        rowspan: _row,
        colspan: _col,
      };
    },
  },

只允许第一栏和第六栏合并效果图 X6 和X1 代表你表格的key值

this.spanObj = dataMethod(this.TableArr,['x6','x1']);

允许全部合并效果图

this.spanObj = dataMethod(this.TableArr);

完整示例

<template>
  <el-table :data="tableData" :span-method="objectSpanMethod" style="width: 100%">
     <el-table-column prop="date" label="日期" width="180">
     </el-table-column>
     <el-table-column prop="name" label="姓名" width="180">
     </el-table-column>
     <el-table-column prop="address" label="地址">
     </el-table-column>
   </el-table>
</template>
<script>
//引入封装的js
import {dataMethod} from '@/components/element/tableObjectSpanMethod.js';
 export default {
    data(){
      return{
        tableData: [],
        spanObj: {}
      }
    },
    created(){
       this.tableData = [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
      //动态渲染 请渲染数剧结束后在执行此方法
      this.spanObj = dataMethod(this.tableData);
    },
    methods:{
      objectSpanMethod({ row, column, rowIndex, columnIndex }){
        // console.log({ row, column, rowIndex, columnIndex },'合并表格')
        //列合并
        let _row = this.spanObj[column.property]?this.spanObj[column.property][rowIndex]:1;
        let _col = _row>0?1:0;
        return {
          rowspan: _row,
          colspan: _col
        }
      },
    }
  }
 </script>