Digital management platform
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
permission system-Mall
personal blog address
column.customRender is a rendering function used to generate complex data. The V3 version has also been upgraded, and its usage is different.
There is the following data
const data = reactive([{
tid: 1,
tname: "Magnum",
tgender: 0,
tage: 23
}])
Want to display the corresponding results (male, female) based on gender identification (0, 1):
1. V1 version processing method
const columns = reactive([{
dataIndex: 'tid',
title: "序号",
align: "center"
}, {
dataIndex: 'tname',
title: "姓名",
align: "center"
}, {
dataIndex: 'tgender',
title: "性别",
align: "center",
customRender: (text, record) => {
return <span>{
record.tgender === 0 ? '男' : '女' }</span>
}
}, {
dataIndex: 'tage',
title: "年龄",
align: "center"
}, {
dataIndex: 'operation',
title: "操作",
align: "center",
}])
The above method is not compatible with the Vite+Vue3+Ant V3 version. The page and console will report the following error:
2. V3 version writing method
const columns = reactive([{
dataIndex: 'tid',
title: "序号",
align: "center"
}, {
dataIndex: 'tname',
title: "姓名",
align: "center"
}, {
dataIndex: 'tgender',
title: "性别",
align: "center",
customRender:({
text, record, index}) => {
console.log(text, record, index)
return record.tgender === 0 ? '男' : '女'
},
}, {
dataIndex: 'tage',
title: "年龄",
align: "center"
}, {
dataIndex: 'operation',
title: "操作",
align: "center",
}])
Tip: Personally, the writing method of the V3 version is more suitable for personal development habits and is also more concise.