Note: The defined columns must be written in data, otherwise the rendering function will not be recognized during the loading process due to the rendering order.
Rendering method 1:
Specify the rendering function:
const columns = [
{
title: 'Ranking',
dataIndex: 'key',
customRender: renderContent // Rules for rendering functions }, {
title: 'Search for keywords',
dataIndex: 'keyword',
customRender: (text, row, index) => {
if (index < 4) { // The first 4 lines of data are rendered in the form of a tag return <a href="javascript:;" rel="external nofollow" rel="external nofollow" >{text}</a>
}
return { // Otherwise it will be rendered in text form with 4 columns exclusive children: text,
attrs: {
colSpan: 4
}
}
}
}
]
const renderContent = (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
return obj
}
Rendering method 2:
Directly call the corresponding slot template:
<a-table :columns="columns" :dataSource="data" :pagination='pagination'>
<template slot="operation">
<a-select placeholder="Select Action" style="width: 100%" @change="listHandleChange">
<a-select-option value="1">Project Progress</a-select-option>
<a-select-option value="2">Quality control</a-select-option>
<a-select-option value="3">Operation and maintenance monitoring</a-select-option>
</a-select>
</template>
<template slot='progress' slot-scope="text,record">
<span>{{text}}</span>
<span v-if=''><a-icon class='arrow-up' type="arrow-up" /> </span>
<span v-if='!'><a-icon class='arrow-down' type="arrow-down" /></span>
</template>
</a-table>
const columns = [
{
title: 'serial number',
dataIndex: 'number',
customRender: renderContent
}, {
title: 'Project name',
dataIndex: 'name',
customRender: (text, row, index) => {
return {
children: <a href="javascript:;" rel="external nofollow" rel="external nofollow" >{text}</a>,
attrs: {}
}
}
}, {
title: 'Project Progress',
dataIndex: 'progress',
scopedSlots: { customRender: 'progress' } // The corresponding slot-scope in the template can be used to pass parameters, where the first parameter is the value progress corresponding to the current field, and the second parameter is all value objects corresponding to the current field, that is, the entire data[n] }, {
title: 'operate',
dataIndex: 'operate',
scopedSlots: { customRender: 'operation' } // Directly correspond to the template with the slot named operation }
]
const data = [
{
key: 6,
number: 6,
name: 'Athena',
progress: '88%',
progressstatus: 1
}
]
Supplementary knowledge:Ant design vue framework, a pitfall in customRow usage in table control
Today, when writing code, I used the <a-table> control in the Ant design framework. One of the requirements is: clicking on a line in the table and some operations need to be performed. Because there is no default line click event, customRow needs to be used for customization.
This method is used in the official documentation, as follows:
<Table
customRow={(record) => {
return {
props: {
xxx... //property },
on: { // event click: (event) => {}, // Click on Line dblclick: (event) => {},
contextmenu: (event) => {},
mouseenter: (event) => {}, // Move the mouse into the line mouseleave: (event) => {}
},
};
)}
customHeaderRow={(column) => {
return {
on: {
click: () => {}, // Click on the header row }
};
)}
/>
The official writing method should be the grammar of lamada. I also use this writing method when I use it today.
as follows:
methods:{
getDetailList(id){
//Perform specific operations },
rowClick: (record, index) => ({
// event on: {
click: event => {
// What to do when clicking on this line ('record', record)
('index', index)
('event', event)
() //This line will report an error, the report is not defined }
}
})
}
During execution, an error will be reported, as follows:
[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘getDetailList' of undefined”。
If you do not use lamada expression, such a problem will not occur. The modified rowClick method is as follows:
rowClick(record, index) {
return {
on: {
click: () => {
(record, index)
()
}
}
}
},
Can execute normally and call the getDetailList method correctly
The above article ant design vue rendering method is the entire content that the editor has shared with you. I hope you can give you a reference and I hope you can support me more.