antdesignvue合并行与scopedSlots插槽函数同时使用

图片效果

可以直接新增组合，在组合里面有合并项，可以单独新增删除某一行

HTML

<a-table
   ref="table"
   size="middle"
   bordered
   :row-key="(record, index) => index"
   :columns="columns"
   :data-source="dataSource"
   :pagination="false"
 >
   <div
     v-for="(key, i) in [
       'one',
       'two',
       'three',
       'four',
     ]"
     :slot="key"
     slot-scope="text, record, index"
     :key="i"
   >
     <div>
       <!-- 列表一 -->
       <a-select
         v-if="key === 'one'"
         show-search
         placeholder="输入名称模糊搜索"
         option-filter-prop="children"
         :filter-option="filterOptionRegion"
         v-model="record.townId"
         @change="townChage($event, record)"
       >
         <a-select-option
           :value="item.id"
           :key="item.id"
           v-for="item in townList"
         >
           {{ item.name }}
         </a-select-option>
       </a-select>

	   <!-- 列表二 -->
       <div v-if="key === 'two'">
         <a-icon
           @click="addLineFn(record, text, index)"
           v-if="!(text === '固定选项')"
           type="plus-circle"
           theme="filled"
           style="color: #40a9ff;cursor: pointer;"
          />
         {{ text }}
       </div>

       <!-- 列表三 -->
       <div v-if="key === 'three'" class="personLiable-name">
         <a-icon
           @click="delLineFn(record, index)"
           v-if="!(record.personLiableType === '固定选项') && showdelBtn(record, index)"
           type="minus-circle"
           theme="filled"
           class="icon-name"
         />
         <a-input
           @blur="e => inputChange(e.target.value, record, key)"
           :value="record[key]"
         />
       </div>

       <!-- 其它输入框 -->
       <a-input
         v-if="key !== 'one' && key !== 'two' && key !== 'three'"
         @blur="e => inputChange(e.target.value, record, key)"
         :value="record[key]"
       />
     </div>
   </div>
	
	<!-- 操作 -->
   <span
     slot="operation"
     slot-scope="text, record, index"
     style="display: flex; justify-content: center; align-items: center"
   >
     <a @click="delFn(record, index)">删除组合</a>
   </span>
 </a-table>

JS

data() {
	townList: [], // 下拉数据
	dataSource: [], // 列表数据
	columns: [
    {
       title: '序号',
       dataIndex: 'index',
       customRender: (text, record, index) => `${index + 1}`,
       width: 80,
       align: 'center'
     },
     {
       title: '列表一',
       dataIndex: 'one',
       align: 'center',
       scopedSlots: { customRender: 'one' },
       customCell: (remark, index) => {
         return {
           style: { display: this.rowSpanArrFn(remark, index) === 0 ? 'none' : undefined },
           attrs: {
             rowSpan: this.rowSpanArrFn(remark, index),
           }
         }
       },
       width: 200
     },
     {
       title: '列表二',
       dataIndex: 'two',
       align: 'center',
       scopedSlots: { customRender: 'two' },
       customCell: (remark, index) => {
         return {
           style: { display: this.rowSpanTypeArrFn(remark, index) === 0 ? 'none' : undefined },
           attrs: {
             rowSpan: this.rowSpanTypeArrFn(remark, index),
           }
         }
       },
       width: 200
     },
     {
       title: '列表三',
       dataIndex: 'three',
       width: 140,
       align: 'center',
       scopedSlots: { customRender: 'three' }
     },
     {
       title: '列表四',
       dataIndex: 'four',
       width: 140,
       align: 'center',
       scopedSlots: { customRender: 'four' }
     },
     {
       title: '操作',
       width: 100,
       align: 'center',
       scopedSlots: { customRender: 'operation' },
       customCell: (remark, index) => {
         return {
           style: { display: this.rowSpanArrFn(remark, index) === 0 ? 'none' : undefined },
           attrs: {
             rowSpan: this.rowSpanArrFn(remark, index),
           }
         }
       },
     }
   ],
}



methods: {
	// 添加组合
	addFn() {
      let myId = new Date().getTime()
      this.dataSource.push(...[
          {
            myId,
            one: '',
	        two: '固定选项',
	        three: '',
	        four: '',
          },
          {
          	myId,
            one: '',
	        two: '可新增选项一',
	        three: '',
	        four: '',
          },
          {
          	myId,
            one: '',
	        two: '可新增选项二',
	        three: '',
	        four: '',
          }
      ])
    },
    // 删除组合
    delFn(rec, index) {
      this.dataSource = this.dataSource.filter(item => item.myId !== rec.myId)
    },
	// 列表一和操作的合并
	rowSpanArrFn(remark, index) {
      if(this.dataSource[index].personLiableType !== '固定选项') {
        return 0
      } else {
        let length = this.dataSource.filter(item => item.myId === remark.myId).length
        return length
      }
    },
    // 列表二的合并
    rowSpanTypeArrFn(remark, index) {
      console.log(this.dataSource, remark, index);
      let newList = this.dataSource.filter(item => item.myId === remark.myId)
      let idStart = this.dataSource.findIndex(item => item.myId === remark.myId)
      let indexStart = newList.findIndex(item => item.personLiableType === remark.personLiableType)
      let length = newList.filter(item => item.personLiableType === remark.personLiableType).length
      if((idStart + indexStart) === index) {
        return length
      } else {
        return 0
      }
    },
    // 是否显示删除图标
    showdelBtn(row, index) {
      let newList = this.dataSource.filter(item => item.myId === row.myId)
      let length = newList.filter(item => item.personLiableType === row.personLiableType).length
      if(length > 1) return true
      return false
    },
    // 添加一行数据
    addLineFn(row, text, index) {
      this.dataSource.splice(index, 0, {
        myId: row.myId,
        one: '',
        two: text,
        three: '',
        four: '',
      })
    },
    // 删除一行数据
    delLineFn(row, index) {
      this.dataSource.splice(index, 1)
    },
}