1.使用后台在项目中使用ant-vue的a-table控件的过程中，需要显示序号栏或者在栏中显示图片、超链接、按钮等UI信息。以上需求可以通过查询文档customCell和customRender来实现，比如下表数据渲染2.slots&scopedSlots的作用在查看文档的过程中，经常会看到xxx|slot|slot-scope等描述信息类型列。比如文档中customRender的描述信息属性表示customRender这个类型生成复杂数据的渲染函数..Function(text,record,index){}\slot-scope一开始我一直以为是专栏可以这样配置//公众号:小码不小date20210205wx:464884492consttableColumn=[{title:'游戏名',dataIndex:'title',customRender:'xxslot'}]定义完这个之后，执行npmrunserve浏览器会显示customRenderisnotfunction的错误信息。后来看到下面的写法//公众号:smallyardisnotsmalldate20210205wx:464884492consttableColumn=[{title:'游戏名',dataIndex:'title',scopedSlots:{customRender:"customRender"}}]好久没搞明白为什么scopedSlots对象的属性是customRender，还有哪些属性？当时知识还不完善，不明白文档上column的使用，可以使用这个属性来配置支持slot-scope的属性的含义。尽管您知道如何使用它，但仍然有必要了解它的工作原理。我们知道在vue中，可以分别通过this.$slots和this.$scopedSlots来访问staticslots和scopedslots。在文件components\table\index.jsx中可以找到组件库将scopedSlots和slots转换为具体函数的过程。代码如下//公众号:小院不小date20210205wx:464884492...//getslotsconst{$slots,$scopedSlots}=this;//转换静态槽Object.keys(slots).forEach(key=>{constname=slots[key];if(column[key]===undefined&&$slots[name]){column[key]=$插槽[名称].length===1?$插槽[名称][0]:$插槽[名称];}});//转换动态插槽对象。keys(scopedSlots).forEach(key=>{constname=scopedSlots[key];if(column[key]===undefined&&$scopedSlots[name]){column[key]=$scopedSlots[name];}});从上面的代码也可以知道，如果定义了以下列配置，那么自定义的slot会失效，下面的代码会显示所有123//公众号:smallyardisnotsmalldate20210205wx:464884492{title:"customRender|slot-scope",dataIndex:'',customRender:()=>123,scopedSlots:{customRender:"customRender"}}也就是说定义为函数的customRender优先级高于scopeslot3.customCellcustomCell影响vnode中的属性信息。您可以在文件components\vc-table\src\TableCell.jsx//对应的代码片段中更改当前列的样式和其他相关信息:小院不小date20210205wx:464884492...if(column.customCell){tdProps=mergeProps(tdProps,column.customCell(record,index));}...return({indentText}{expandIcon}{text});所以这个对象是可以传值的。深入数据对象可以参考Vue官方文档中的描述。可以return如下改变当前栏目字体大小和颜色//公众号:小院不小date20210205wx:464884492return{style:{color:'red',fontSize:'14px'}}内容也可以改成如下//公众号:小院不小日期20210205wx:464884492return{domProps:{innerHTML:record.title+"#"+(index+1)}}4.customRendercustomRender也可以影响当前列的显示信息，但更灵活。可以通过返回一段jsx来获取和返回一个类似于customCell的属性信息。不过从代码来看，它只接收属性attrs、props、class、style、children，优先级没有customCell高。customRender可以是槽或函数。当用作插槽时，代码应如下所示//公众号:date20210205wx:464884492[{title:"customRender|slot-scope",dataIndex:'',scopedSlots:{customRender:"customRender"}},{title:"customRender|slot-scope",dataIndex:'',slots:{customRender:"customRender"}}]从上面学习的slot知识我们可以知道scopeslot的优先级高于Staticslots的意思staticslots和scopedslots键值相等的配置在一列中，scopedslots的内容会优先显示。作为函数使用时，代码应该如下//公众号:小院不小日期20210205wx:464884492[{title:'游戏特色',dataIndex:'desc',customRender:(text,record,index)=>{if(index==1){return{text}@校园不小
}return{attrs:{},props:{},class:{},style:{},children:text}}}]这两个返回值组件由isInvalidRenderCellText函数判断。判断是否为jsx的主要代码如下//公众号:date20210205wx:464884492functionisValidElement(element){return(element&&typeofelement==='object'&&'componentOptions'inelement&&'context'在元素中&&element.tag!==undefined);通过上面的描述，我们可以很好的使用customRender属性。不过，我们还是要明白，这个属性对应的是源码逻辑。components\vc-table\src\TableCell.jsx文件中对应的代码片段如下//公众号:date20210205wx:464884492if(customRender){text=customRender(text,record,index,column);if(isInvalidRenderCellText(text)){tdProps.attrs=text.attrs||{};tdProps.props=text.props||{};tdProps.class=text.class;tdProps.style=text.style;colSpan=tdProps.attrs.colSpan;rowSpan=tdProps.attrs.rowSpan;text=text.children;}}if(column.customCell){tdProps=mergeProps(tdProps,column.customCell(record,index));}5.总结ant的组件非常灵活，很多需要扩展才能实现一些特殊的功能。customRender和customCell都可以实现自定义列信息。在什么场景下使用，还需要根据不同的业务需求。比如我要改变列的字体、颜色等，我们优先使用customCell。根据上面的介绍，这里有一道面试题代码如下//公众号：小院不小日期20210205wx:464884492{title:"ColumnizedColumn",dataIndex:'',customRender:()=>'FunctionRendering'scopedSlots:{customRender:"scopedSlots"},slots:{customRender:"slots"}}columncustomcolumn最终渲染的内容是AfunctionrenderingBscopedSlotsCslots如果想知道答案或者需要demo源码，请扫描下方二维码，关注公众号[小室不小]，回复ant-table获取。
