项目场景：

项目场景:表格编辑并且合并功能

---

问题描述

在一个项目中遇到了表格嵌套，如果他是最后一级是可以进行打分的。不是最后一级就没有打分功能（行编辑scopedSlots）。但是打分这一列不能舍弃，因为可能同级表格中其他行是最后一级，会有分数。所以想到了表格合并（customRender）。

---

原因分析：

分析：最开始想到的就是把scopedSlots和customRender分开写。

        {
           title: '分数',
           align: "center",
           dataIndex: 'num',
           ellipsis: true,
           width: 100,
           scopedSlots: { customRender: 'num' },
           customRender: (text, row, index) => {
             const obj = {
              children: text,
              attrs: {},
            };
             if (row.hasChild != "0") {
               obj.attrs.colSpan = 0;
             } else {
              obj.attrs.colSpan = 1;
             }
             return obj
           }
         },

---

解决方案：

仔细看Ant官网会发现：使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 scopedSlots: { customRender: ‘XXX’}

customRender：生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并

scopedSlots：使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 scopedSlots: { customRender: ‘XXX’}

{
          title: '自评分',
          align: "center",
          dataIndex: 'num',
          ellipsis: true,
          width: 100,
          // scopedSlots: { customRender: 'num' },
          customRender: (text, row, index) => {            
            const obj = {
              children: (
                <editable-cell text={text} vOn:change={(e) => this.onCellChange(row)}
                  style="width:75%;text-align: center;" />
              ),
              attrs: { rowSpan: 1, },
            };
            if (row.hasChild != "0") {
              obj.attrs.colSpan = 0;
            } else {
              obj.attrs.colSpan = 1;
            }
            return obj
          }
},

实现效果↓

一定要仔细！！！！！细心！！！！