1. Use context

In the process of using ant-Vue a-table control in a project, you need to display the serial number column or display images, hyperlinks, buttons and other UI information in the column. This can be done by querying the customCell and customRender documents, such as the following table data rendering

2. Slots&scopedSlots role

In the process of check the document, in the column of type often see XXX | slot | slot – the scope of this description. For example, customRender describes information in a document

attribute instructions type
customRender Rendering functions that generate complex data.. Function(text, record, index){}|slot-scope

At first I thought that the configuration in the column could be as follows

Date 20210205 Wx :464884492
const tableColumn = [
      {
        title: 'Game Name'.dataIndex: 'title'.customRender:'xxslot'}]Copy the code

The customRender is not function error message is displayed when you run NPM run serve. And later saw the following writing

Date 20210205 Wx :464884492
const tableColumn = [
      {
        title: 'Game Name'.dataIndex: 'title'.scopedSlots: {
          customRender: "customRender"}}]Copy the code

It took a long time to understand why the property of scopedSlots is customRender. What else is there? This property can be used to configure the slot-scope-supporting properties when columns are used on a document without sufficient knowledge at the time

Now that you know how to use it, it’s important to understand how it works. We know that in vue we can access static slots and scopedSlots via this.$slots and this.$scopedSlots, respectively. In the file components\table\index. JSX, you can find the component library to convert scopedSlots and slots into a specific function, as shown below

 Date 20210205 Wx :464884492.// Get the slot
 const { $slots, $scopedSlots } = this;
 // Convert static slots
 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]; }});// Convert the dynamic slot
 Object.keys(scopedSlots).forEach(key= > {
  const name = scopedSlots[key];
  if (column[key] === undefined&& $scopedSlots[name]) { column[key] = $scopedSlots[name]; }});Copy the code

As you can also see from the above code, if you define the following column configuration, the custom slot will be invalidated, and the following code will display 123 for all columns

Date 20210205 Wx :464884492
{
    title: "customRender|slot-scope".dataIndex: ' '.customRender: () = > 123.scopedSlots: {
      customRender: "customRender"}}Copy the code

That is, customRender is defined as a function with precedence over the scope slot

3. customCell

CustomCell affects the attribute information in vNode. You can change the style of the current column and other relevant information in the file components\vc-table\ SRC \ Tablecell.jsx corresponding to the code snippet

Date 20210205 Wx :464884492.if(column.customCell) { tdProps = mergeProps(tdProps, column.customCell(record, index)); }...return (
  <BodyCell class={cellClassName} {. tdProps} >
    {indentText}
    {expandIcon}
    {text}
  </BodyCell>
);    
Copy the code

So this object can pass values as described in the official VUE documentation. You can return the following pair to change the font size and color of the current column

Date 20210205 Wx :464884492
 return {
    style: {
      color: 'red'.fontSize: '14px'}}Copy the code

You can also change the content displayed as follows

Date 20210205 Wx :464884492
return {
  domProps: {
      innerHTML: record.title + "#" + (index + 1)}}Copy the code

4. customRender

CustomRender can also influence the display information for the current column, but it is more flexible. You can return a piece of JSX fetch that returns a property information similar to customCell. But from the code, it only accepts attributes attrs, props, class, style, and children, and it has a lower priority than customCell. CustomRender can be a slot or a function. The code should look like this when used as a slot

Date 20210205 Wx :464884492
[{
  title: "customRender|slot-scope".dataIndex: ' '.scopedSlots: {
    customRender: "customRender"
  }
},{
  title: "customRender|slot-scope".dataIndex: ' '.slots: {
    customRender: "customRender"}}]Copy the code

When used as a function, the code should look like this: static slots and scoped slots are configured in a column with equal keys to display the contents of the scoped slots first

Date 20210205 Wx :464884492
[{
  title: 'Game Features'.dataIndex: 'desc'.customRender: (text, record, index) = > {
    if (index == 1) {
      return <div> {text} <span style="color:blue">@Small yard is not small</span></div>
    }
    return {
      attrs: {},props: {},class: {},style: {},children: text
    }
  }
}]
Copy the code

The two return value components are determined by the isInvalidRenderCellText function. The main code for determining whether it is JSX is as follows

Date 20210205 Wx :464884492
function isValidElement(element) {
  return (
    element &&
    typeof element === 'object' &&
    'componentOptions' in element &&
    'context' inelement && element.tag ! = =undefined
  ); 
}
Copy the code

With the above instructions, we can use the customRender property nicely. However, it is important to understand that this attribute corresponds to the source code logic. The corresponding code snippet in the file components\vc-table\ SRC \ tablecell.jsx is shown below

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));
}
Copy the code

5. To summarize

Ant components are flexible, and many require extensions to implement specific functions. CustomRender and customCell can both implement custom column information. The application scenario depends on different service requirements. For example, if I want to change the column font, color, etc., we will give priority to customCell. According to the introduction above here is an interview question code as follows

Date 20210205 Wx :464884492
{
  title: "Custom column".dataIndex: ' '.customRender:() = >'Function render'
   scopedSlots: {
    customRender: "scopedSlots"
  },
  slots: {
    customRender: "slots"}}Copy the code

What is the final render content of the custom column

  • A function rendering
  • B scopedSlots
  • C slots

If you want to know the answer or need Demo source code, please scan the qr code below, follow the public account [xiaoyuan No Small], reply to ant-table to obtain.