项目场景:
项目场景:表格编辑并且合并功能
问题描述
在一个项目中遇到了表格嵌套,如果他是最后一级是可以进行打分的。不是最后一级就没有打分功能(行编辑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}},
实现效果↓
一定要仔细!!!!!细心!!!!