1. 应用背景

在我的项目中应用ant-vue的a-table控件过程中，须要显示序号列或者在列中显示图片，超链，按钮等UI信息。通过查问文档customCell和customRender能够实现以上需要，比方实现如下表格数据渲染

2. slots&scopedSlots作用

在查看文档过程中，在类型一栏中常常看到 xxx|slot |slot-scope 这样的形容信息。比方customRender在文档中的形容信息

属性阐明类型
customRender生成简单数据的渲染函数..Function(text, record, index){}\slot-scope

在最后始终认为在列中能够是如下配置的

// 公众号:小院不小 date 20210205 wx:464884492const tableColumn = [      {        title: '游戏名称',        dataIndex: 'title',        customRender:'xxslot'      }]

这样定义后执行npm run serve在浏览器会呈现customRender is not function 的错误信息。以及起初看到有如下写法

// 公众号:小院不小 date 20210205 wx:464884492const tableColumn = [      {        title: '游戏名称',        dataIndex: 'title',        scopedSlots: {          customRender: "customRender"        }      }]

还有很长一段时间不明确scopedSlots这个对象的属性为啥是customRender, 还有其余的什么属性吗？过后常识还不欠缺没有了解到文档上应用 columns 时，能够通过该属性配置反对 slot-scope 的属性的含意

尽管晓得怎么用了，但还是有必要理解下它是如何运行的。咱们晓得在vue中能够通过this.$slots、this.$scopedSlots别离拜访动态插槽和作用域插槽。在文件components\table\index.jsx中能够找到组件库对scopedSlots、slots转换成具体函数的过程，代码如下

 // 公众号:小院不小 date 20210205 wx:464884492 ... // 获取插槽 const { $slots, $scopedSlots } = this; // 转换动态插槽 Object.keys(slots).forEach(key => {      const name = slots[key];      if (column[key] === undefined && $slots[name]) {        column[key] = $slots[name].length === 1 ? $slots[name][0] : $slots[name];      }    }); // 转换动静插槽   Object.keys(scopedSlots).forEach(key => {  const name = scopedSlots[key];  if (column[key] === undefined && $scopedSlots[name]) {    column[key] = $scopedSlots[name];  } });

从以上代码也能够晓得，如果您定义如下的列配置，自定插槽会生效,以下代码该列会全副显示123

// 公众号:小院不小 date 20210205 wx:464884492{    title: "customRender|slot-scope",    dataIndex: '',    customRender: () => 123,    scopedSlots: {      customRender: "customRender"    }}

也就是说customRender定义成函数的优先级高于作用域插槽

3. customCell

customCell影响的是vnode中的属性信息，你能够扭转当前列的款式等相干信息，在文件 components\vc-table\src\TableCell.jsx 对应代码片段

// 公众号:小院不小 date 20210205 wx:464884492... if (column.customCell) {  tdProps = mergeProps(tdProps, column.customCell(record, index));}... return (  <BodyCell class={cellClassName} {...tdProps}>    {indentText}    {expandIcon}    {text}  </BodyCell>);

所以这个对象能够传递值能够参考vue官网文档深刻数据对象中的形容。你能够返回如下对扭转当前列的字体大小和色彩

// 公众号:小院不小 date 20210205 wx:464884492 return {    style: {      color: 'red',      fontSize: '14px'    } }

也可通过如下扭转显示的内容

// 公众号:小院不小 date 20210205 wx:464884492return {  domProps: {      innerHTML: record.title + "#" + (index + 1)    }}

4. customRender

customRender也能够影响当前列的显示信息，不过它更灵便。能够返回一段jsx获取返回一个相似customCell一样的属性信息。不过从代码来看，它只接管一下属性attrs、props、class、style、children，而且它的优先级也没有customCell优先级高。customRender能够是一个插槽，也能够是一个函数。
当作为插槽应用时代码应该如下所示

// 公众号:小院不小 date 20210205 wx:464884492[{  title: "customRender|slot-scope",  dataIndex: '',  scopedSlots: {    customRender: "customRender"  }},{  title: "customRender|slot-scope",  dataIndex: '',  slots: {    customRender: "customRender"  }}]

从上边理解到的插槽常识能够晓得作用域插槽的优先级高于动态插槽也就是说，在一个列中别离配置了键值相等的动态插槽和作用域插槽，将优先显示作用域插槽的内容
当作为函数应用时，代码应该如下所示

// 公众号:小院不小 date 20210205 wx:464884492[{  title: '游戏特点',  dataIndex: 'desc',  customRender: (text, record, index) => {    if (index == 1) {      return <div> {text} <span style="color:blue"> @小院不小</span></div>    }    return {      attrs:{},      props:{},      class:{},      style:{},      children: text    }  }}]

两种返回值组件通过isInvalidRenderCellText函数判断。判断是否是jsx的形式次要代码如下

// 公众号:小院不小 date 20210205 wx:464884492function isValidElement(element) {  return (    element &&    typeof element === 'object' &&    'componentOptions' in element &&    'context' in element &&    element.tag !== undefined  ); }

通过上边的阐明，咱们就能很好的应用customRender属性了。不过咱们还是有必要理解一下，这段属性对应源代码逻辑。在文件components\vc-table\src\TableCell.jsx 对应的代码片段如下

// 公众号:小院不小 date 20210205 wx: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.依据下面的介绍这里有一个面试题代码如下

// 公众号:小院不小 date 20210205 wx:464884492{  title: "自定义列",  dataIndex: '',  customRender:()=>'函数渲染'   scopedSlots: {    customRender: "scopedSlots"  },  slots: {    customRender: "slots"  }}

请问列自定义列最终渲染的内容是

  • A 函数渲染
  • B scopedSlots
  • C slots

如果想晓得答案或须要Demo源码请扫描下方的二维码,关注公众号[小院不小],回复ant-table获取.