关于前端:antdesignvue中table自定义列

1. 应用背景

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

2. slots&scopedSlots 作用

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

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

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

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

// 公众号: 小院不小 date 20210205 wx:464884492
const 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:464884492
return {
  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:464884492
function 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:464884492
if (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 获取.