Table custom column in Ant-Design-Vue

1. Use context

In the process of using Ant-Vue’s A-Table control in a project, you need to display the serial number column or display UI information such as images, hyperlinks, buttons, etc. After querying the documents CustomCell and CustomRender, the above requirements can be realized, 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, the description information of CustomRender in the document

It was originally assumed that the columns could be configured as follows

// Date 20210205 WX :464884492 Const TableColumn = [{Title: Const TableColumn], Dataindex: 'title', customRender:'xxslot' } ]

Execution of NPM run serve after this definition will result in a customRender is not function error message in the browser. And then I saw the following

// Date 20210205 wx:464884492 const TableColumn = [{title: 'Name ', dataIndex:' Name ', scopedSlots: { customRender: "customRender" } } ]

It has been a long time since I understood why the property of Slots object is CustomRender. Any other properties? It was not enough to understand what it meant to configure a slot-scope supporting property with this property when Columns were used on a document

Now that you know how to use it, it’s important to know how it works. We know that in Vue you can access static and scopedSlots via this.$slots and this.$scopedSlots, respectively. In the file Components \ Table \ Index.jsx you can find the process by which the component library converts the scopedSlots and the lots into a concrete function as follows

// Date: 20210205 WX :464884492... // get slots const {$slots, $scopedSlots} = this; // String (lots).foreach (key => {const name = lots[key]; if (column[key] === undefined && $slots[name]) { column[key] = $slots[name].length === 1 ? $slots[name][0] : $slots[name]; }}); ForEach (key => {const name = scopedSlots[key]; if (column[key] === undefined && $scopedSlots[name]) { column[key] = $scopedSlots[name]; }});

As you can also see from the above code, custom slots are invalidated if you define the following column configuration, which displays 123 in its entirety

No. : / / public yard big date 20210205 wx: 464884492 {title: "customRender | slot - scope", dataIndex: ', customRender: () => 123, scopedSlots: { customRender: "customRender" } }

That is, customRender is defined as a function with a higher priority than the scoped slot

3. customCell

CustomCell affects the property information in the vnode. You can change the style of the current column and other related information in the file Components \ VC-Table \ Src \TableCell.jsx for 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> );

So this object can pass values and you can refer to the official documentation of VUE in depth in the data object description. You can return the following to change the font size and color of the current column

// Date 20210205 wx:464884492 return {style: {color: 'red', fontSize: '14px'}}

You can also change the display by doing the following

// Date 20210205 WX :464884492 return {domProps: {innerHTML: record.title + "#" + (index + 1)}}

4. customRender

CustomRender can also affect the display information of the current column, but it is more flexible. You can return a JSX fetch that returns property information like a customCell. But from the code point of view, it only receives attributes attrs, props, class, style, children, and its priority is not as high as that of customCell. CustomRender can be either a slot or a function. The code should look like this when used as a slot

No. : / / public yard big date 20210205 wx: 464884492 [{title: "customRender | slot - scope", dataIndex: ', scopedSlots: {customRender: "customRender" } },{ title: "customRender|slot-scope", dataIndex: '', slots: { customRender: "customRender" } }]

From what we learned about slots above, we know that scoped slots take precedence over static slots. That is, if a column is configured with static and scoped slots with equal keys, the contents of the scoped slot will be displayed first. When used as a function, the code should look like this

// Date 20210205 wx:464884492 [{title: 'Game Features ', dataIndex: 'desc', customRender: (text, record, If (index == 1) {return <div> {text} <span style="color:blue"} </span></div>} return {attrs:{}, props:{}, class:{}, style:{}, children: text } } }]

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

Function isValidElement(element) {return (element && typeof element === = 'object' && 'componentOptions' in element && 'context' in element && element.tag ! == undefined ); }

With the above instructions, we can use the CustomRender property very well. However, it is important to understand that this property corresponds to the source logic. The corresponding code snippet in the file Components \vc-table\ SRC \ tablecell.jsx is as follows

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. To summarize

Ant components are flexible, and many require extensions to implement special functionality. CustomRender and CustomCell can both implement custom column information. In what scenario to use, but also according to different business appeals. So let’s say I want to change the font of the column, the color of the column, etc., so we give priority to customCell. According to the above introduction here is an interview question code as follows

// Date 20210205 wx:464884492 {title: "custom column ", dataIndEx:" ", customRender:)=> "ScopedSlots: { customRender: "scopedSlots" }, slots: { customRender: "slots" } }

The final rendering content of the column custom column is

• A function rendering
• B scopedSlots
• C slots

If you want to know the answer or need the Demo source code, please scan the QR code below and follow the public account [Yard not smallReply,ant-tableTo obtain.