vue iview table表格 render函数 自动合并单元格

<template>
  <div class="new-contract" style="height: 100%">
    <div class="serveTop">
      <div class="content-titles" style="padding-left: 24px">
        <Icon
          size="24"
          @click="backEvent"
          type="md-arrow-back"
          style="vertical-align: sub; cursor: pointer"
        />
        <span>{
   {
    breadcrumbName }}</span>
      </div>
    </div>
    <div
      class="form-content"
      style="
        height: calc(100% - 160px);
        overflow: auto;
        padding: 0;
        margin: 24px;
        min-height: 0;
      "
    >
      <Form
        ref="executeForm"
        :model="executeForm"
        label-position="left"
        :rules="rules"
        :label-width="110"
      >
        <!-- <h2 class="titNew" style="padding: 0; margin-bottom: 20px">基本信息</h2> -->
        <Row style="padding: 20px 24px 0px">
          <Col span="8">
            <FormItem prop="userName" label="客户名称">
              <!-- <Select
                filterable
                clearable
                v-model="executeForm.userName"
                :disabled="executeForm.id || executeForm.customerId ? true : false"
                @on-change="handleUserNames"
                placeholder="请选择客户名称"
              >
                <Option
                  v-for="item in customerList"
                  :value="item.userName"
                  :key="item.id"
                >
                  {
   {
    item.userName }}
                </Option>
              </Select> -->
              <Select
                clearable
                filterable
                v-model="executeForm.userName"
                :disabled="executeForm.id || executeForm.customerId ? true : false"
                @on-change="handleUserNames"
                placeholder="请选择客户名称"
              >
                <Option
                  v-for="items in customerList"
                  :value="items.userName"
                  :key="items.id"
                  >{
   {
    items.userName }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8" offset="1">
            <FormItem prop="taskType" label="客户类型">
              <Select
                disabled
                v-model="executeForm.customerType"
                placeholder="请选择客户类型"
              >
                <Option
                  v-for="item in customerType"
                  :value="item.dictKey"
                  :key="item.dictKey"
                >
                  {
   {
    item.dictValue }}
                </Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Table
          class="tableStyles"
          max-height="420"
          height="300"
          :row-class-name="rowClassName"
          ref="tableStyles"
          :span-method="handleSpan"
          :columns="columns"
          :data="tableData"
        ></Table>
      </Form>
      <Button
        style="margin-top: 35px; margin-left: 90px"
        @click.stop="handleAddTable"
        type="primary"
        custom-icon="i-td i-td-add_px"
        >按合同编号添加</Button
      >
      <div style="padding: 35px 0px; margin-left: 90px">
        <Button
          type="primary"
          style="margin-right: 20px"
          @click.stop="handleok('executeForm')"
          >提交</Button
        >
        <Button @click="backEvent">取消</Button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import _ from "lodash";
import moment from "moment";
import {
    isEmail } from "@/utils/validate";
import {
    fetchDictList } from "@/api/Common";
import {
    getBussinessCodeList, getProductNameList} from '../../../api/taskServerV3';
export default {
   
  name: "newDataPayManager",
  data: function () {
   
    const _this = this
    const validateClass = (rule, value, callback) => {
   
      const max =
        value.length &&
        value.some((s) => {
   
          return s.length > 30;
        });
      const isEm =
        value.length &&
        value.some((m) => {
   
          return !isEmail(m);
        });
      if (!value.length) {
   
        callback();
      } else if (max) {
   
        callback(new Error("每项最多支持30个字符"));
      } else if (isEm) {
   
        callback(new Error("请输入正确的邮箱格式"));
      } else {
   
        callback();
      }
    };
    return {
   
      addOff: false,
      customerInfo: {
   },
      customerType: [],
      customerList: [],
      customerPay: [],
      rowKey: 0,
      columns: [
        {
   
          title: "序号",
          width: 70,
          render: (h, params) => {
   
            return h("span", params.index + 1);
          },
        },
        {
   
          key: "id2",
          minWidth: 240,
          renderHeader: (h, params) => {
   
            return h("div", [
              h("span", "合同编号"),
              h(
                "span",
                {
   
                  style: {
   
                    color: "#e62d2d",
                    fontSize: "14px",
                    fontFamily: 'SimSun'
                  },
                },
                "*"
              ),
            ]);
          },
          render: (h, params) => {
   
            if (params.row._index === _this.rowKey || params.row.isShowCompen) {
   
              return h("Select", {
   
                props: {
   
                  value: params.row.businessCode,
                  placeholder: "请选择合同编号",
                },
                domProps: {
   
                  id: "price" + params.index,
                },
                on: {
   
                  'on-change': (val) => {
   
                    this.tableData.forEach((ele,index) =>{
   
                      if(index == params.row._index){
   
                        ele.businessCode = val;
                      }
                    })
                  },
                },
              }, [
                _this.bussinessCodeList.map((val)=>{
    //dataList就是要展示的数组
                  return h('Option', {
   
                    props: {
   value: val.businessCode}  
                  },`${
     val.businessCode}(${
     val.businessName})`);  
                })
              ]);
            }
            return h("div", params.row.businessCode);
          },
        },
        {
   
          key: "id",
          minWidth: 280,
          renderHeader: (h, params) => {
   
            return h("div", [
              h("span", "合同产品名称"),
              h(
                "span",
                {
   
                  style: {
   
                    color: "#e62d2d",
                    fontSize: "14px",
                    fontFamily: 'SimSun'
                  },
                },
                "*"
              ),
            ]);
          },
          render: (h, params) => {
   
            if (params.row._index === _this.rowKey || _this.rowKey == null) {
   
              return h("Select", {
   
                props: {
   
                  value: params.row.productId,
                  placeholder: "请选择合同产品名称",
                  filterable: true,
                  clearable: true,
                  labelInValue: true,
                  // remoteMethod: query => {
   
                  //   _this.proRemoteMethod(query, params.row._index)
                  // }
                },
                domProps: {
   
                  id: "price" + params.index,
                },
                on: {
   
                  'on-change': (val) => {
   
                    // params.row.productId = val;
                    _this.tableData.forEach((ele,index) =>{
   
                      if(index == params.row._index){
   
                        ele.productId = val.value;
                        ele.productName = val.label
                      }
                    })
                  },
                },
              }, [
                h('OptionGroup', {
   
                  props: {
   
                    label: '合同产品'
                  }
                }, [
                  _this.contractList.map((val)=>{
    //dataList就是要展示的数组
                    return h('Option', {
   
                      props: {
   value: val.id}  
                    },`${
     val.productName}(${
     val.classificationName})`);  
                  })
                ]),
                h('OptionGroup', {
   
                  props: {
   
                    label: '非合同产品'
                  }
                }, [
                  _this.nonContractList.map((val)=>{
    //dataList就是要展示的数组
                    return h('Option', {
   
                      props: {
   value: val.id}  
                    },`${
     val.productName}(${
     val.classificationName})`);  
                  })
                ])
              ]);
            }
            return h("div", params.row.productName);
          },
        },
        {
   
          key: "totalBusiness",
          minWidth: 160,
          renderHeader: (h, params) => {
   
            return h("div", [
              h("span", "业务总量"),
              h(
                "span",
                {
   
                  style: {
   
                    color: "#e62d2d",
                    fontSize: "14px",
                    fontFamily: 'SimSun'
                  },
                },
                "*"