封装elementui的table的合并方法

---

前言

主要是记录一下span-method的封装，在此过程中发现emit是无返回值的，这里的解决方案是使用回调函数来实现的。以后有好的方法在补充

完整代码

<template>
  <el-table
      :data="tableData"
      :stripe='tableStripe'
      :height='tableHeight'
      :border='tableBorder'
      :row-key='rowKey'
      :highlight-current-row='tableHighlight'
      :span-method="objectSpanMethod"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentChange"
      >
      <el-table-column
      type="selection"
      width="55"
      v-if='multiSelect'>
    </el-table-column>
    <el-table-column
      label="序号"
      width="55"
      type='index'
      v-if='indexFlag'>
    </el-table-column>
      <el-table-column
        v-for='item in tableHeader'
        :key='item.id'
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        >
      </el-table-column>
    </el-table>
</template>

<script>
export default {
  name: 'BaseTable',
  props: {
    // 表格线
    tableBorder:{
        type:Boolean,
        default:true
    },
    // 表格间隔色
    tableStripe:Boolean,
    // 表格高度
    tableHeight:[Number,String],
    // 表格点击之后的高亮
    tableHighlight:Boolean,
    // 表格行数据的key
    rowKey:{
        type:String,
        default:'id'
    },
    // 表格的列名
    tableHeader: {
        type:Array,
        default:()=>{
            return [
                {label:'ID',prop:'id',width:180},
                {label:'姓名',prop:'name',width:180},
                {label:'数值',prop:'amount1',width:180},
            ]
        }
    },
    // 表格数据
    tableData:Array,
    // 合并
    rowColumnFlag:Boolean,
    // 复选框
    multiSelect:Boolean,
    // 序号，默认
    indexFlag:{
        type:Boolean,
        default:true
    },
  },
  data(){
      return {
		rowAndColumn:[]
      }
  },
  mounted(){
      this.rowAndColumn = []
      if(this.rowColumnFlag){
            this.getRowColumn(this.tableData)
        }
  },
  methods: {
      // 合并条件
      conditions(data,i){
          let boolean = false
          this.$emit('conditions',data,i,(val) => {
          boolean = val;
        })
        return boolean
      },
      // 合并获取数据。这个写在父页面也可以的，不需要写方法的传值了
    getRowColumn(data) {
        // data就是我们从后台拿到的数据
        let index = 0
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.rowAndColumn.push(1);
          index= 0;
        } else {
          // 合并条件
          if (this.conditions(data,i)) {
            this.rowAndColumn[index] += 1;
            this.rowAndColumn.push(0);
          } else {
            this.rowAndColumn.push(1);
            index= i;
          }
        }
      }
    },
    // 合并方法
      objectSpanMethod({ rowIndex, columnIndex }) {
          let obj = {
            rowspan: 1,
            colspan: 1
          };

        if (this.rowColumnFlag) {
        this.$emit(
          "spanMethod",
          { rowIndex, columnIndex },
          this.rowAndColumn,
          (val) => {
            obj = val;
          }
        );
      }

        return obj
      },
      // 复选框，多选
      handleSelectionChange(val) {
        this.$emit('update:multipleSelection',val)
        this.$emit('selectionChange',val)
      },
      // 单选
      handleCurrentChange(val){
        this.$emit('update:selected',val)
        this.$emit('currentChange',val)
      }
    }
}
</script>



// 调用时，tableData是必填的，对于测试数据来说，其他可不填，只是记录合并方法
<base-table :tableData='tableData' @spanMethod='spanMethod' :rowColumnFlag='true' @conditions='conditions'></base-table>

// 测试数据
tableData: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }],
// 合并条件
conditions(data,i,callback){
      callback(data[i].id % 2===0)
    },
// 合并方法
spanMethod({ rowIndex, columnIndex },rowAndColumn,callback) {
      let obj = {}
      // 合并行
      if (
        (columnIndex === 0 ||
          columnIndex === 1) &&
        rowAndColumn.length > 0
      ) {
        if (rowAndColumn[rowIndex]) {
          let rowNum = rowAndColumn[rowIndex];
          obj =  {
            rowspan: rowNum,
            colspan: rowNum > 0 ? 1 : 0
          };
        } else {
          obj = {
            rowspan: 0,
            colspan: 0
          };
        }
      }else {
        obj = {
            rowspan: 1,
            colspan: 1
          };
      }
      // 合并列
      // if (
      //   (rowIndex === 0 ||  
      //     rowIndex === 1) &&
      //   rowAndColumn.length > 0
      // ) {
      //   if (rowAndColumn[columnIndex]) {
      //     let rowNum = rowAndColumn[columnIndex];
      //     obj =  {
      //       rowspan: rowNum > 0 ? 1 : 0,
      //       colspan: rowNum
      //     };
      //   } else {
      //     obj = {
      //       rowspan: 0,
      //       colspan: 0
      //     };
      //   }
      // }else {
      //   obj = {
      //       rowspan: 1,
      //       colspan: 1
      //     };
      // }
      callback(obj)
    },