antd的customRender怎么用

Question

用的antd vue ,table表，我的每个单元格上面有用 scopedSlots: { customRender: 'edit' },引入插槽，，但是我要是用customRender合并功能的话，因为customRender影响是这个表头下的所有单元格。所以我设置的插槽就不显示了，我想知道有没有办法让插槽跟合并功能共存，表头下不满足我判断的单元格，不合并，显示插槽，求大神解惑

  {
    title: '二级单位名称',
    dataIndex: '2',
    key: '2',
    align: 'center',
    width: '120px',
    colSpan: 1,
    scopedSlots: { customRender: 'edit' },//引入的插槽
    customRender: (text, row, index) => {
      const obj = {
        children: text,
        attrs: {}
      }
      if (index === 4) {
        obj.attrs.colSpan = 0
      }
      return obj
    }
  },

 // 引入edit 插槽
     <template slot="edit" slot-scope="text, record">
        <div ">{{text}}</div>
         <a-input :value="text"
          @change="e => handleChange(e.target.value,  record, e.target)"       />
      </template>

Answer 1

今天我遇到了同样的问题，我第一个思路是跟你一样，配合customRender和slotScope,结果以失败为终。 第二个思路是用template模式实现，结果可想而知。在摸索过程中发现customRender还有一个兄弟，叫customRow方法，查看源码后发现此方法返回值会合并（merge）到tableCell参数中：

更让人高兴的是，这方法在rowSpan和colSpan 问题中起到的作用是跟customRow是一样的，还能跟scopedSlot配合用。这个问题的正解就是customRow+scopedSlot。
相关代码：

返回null 能隐藏也是从源码里看出来的:

最后根据实际情况把计算好的rowSpan和colSpan弄到tableData中来，然后用customRow去控制表单即可。
最后我实现的效果是:

rowSpan和colSpan的计算方式因需求的不同而不同，给出计算过程也是徒劳。
最后，上面截图内容可在node_modules/ant-design-vue/lib/vc-table/src/TableCell.js 文件中找到。

Answer 2

文档中介绍

表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。

你是想合并当前行所有单元格，colSpan=x，x是想要合并单元格的格式

Answer 3

我也遇到了同样的问题，解决后写了篇笔记，可以看看。