文章目录
使用情景:
vue3中对antdesign表格中的不同列进行属性计算。利用customRender
的属性
一、Template
<a-table :dataSource="portData" :columns="portColumns" :row-key="(record, index) => index" :pagination="pagination">
<template v-for="col in ['admin_state', 'status', 'force_on']"
#[col]="{ record }"> {
{
stateTrans(record[col]) }}
</template>
<template #action="{ record }">
<a @click="handleClick(record, 'detail')">{
{
t('app.sys.detail') }}</a>
</template>
</a-table>
二、JS
const portColumns = [
{
key: 'admin_state', fixed: 'left', title: t('app.poe.admin_state'),
dataIndex: 'admin_state',
customRender: function (text, record, index)
{
if (text.record.admin_state || text.record.force_on) {
if (text.record.force_on === true) return 'Force_on'
else return 'Enable'
} else {
return 'Disabled'
}
},
},
]
三、效果
- 即在拿到数据时,渲染之前,对每条数据中需要操作的属性进行值得运算,得到需要的结果。
- 对每条数据中的admin_state和force_on属性进行运算,返回值作为dmin_state的列的值。