1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ant-design vue Table表格使用scopedSlots和customRender

ant-design vue Table表格使用scopedSlots和customRender

时间:2019-02-18 12:40:06

相关推荐

ant-design vue Table表格使用scopedSlots和customRender

项目场景:

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

问题描述

在一个项目中遇到了表格嵌套,如果他是最后一级是可以进行打分的。不是最后一级就没有打分功能(行编辑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}},

实现效果↓

一定要仔细!!!!!细心!!!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。