一、CustomRender写法
const columns: any[] = [
{
title: "是否启用",
dataIndex: "itemStatus",
customRender: (text, record, index) => {
return text.text == 1 ? "否" : "是"
}
},
]
AI 代码解读
1、vue2x+antd1x
<template>
<a-table :columns="columns" :dataSource="dataSource" :pagination="false" ></a-table>
</template>
<script>
export default {
data() {
return {
dataSource: [],
columns:[
{
title: 'Date Sent',
dataIndex: 'paymentDate',
key: 'paymentDate',
align: 'center',
customRender: (text,record) => {
if (record.status == 2) {
return <span style="color:red">{ text }</span>;
}else{
return text
}
},
},
{
title: 'Sender Account Name',
key: 'accountName',
dataIndex: 'accountName',
align: 'center',
},
]
}
}
}
</script>
AI 代码解读
2、vue3x+antd3x+js
<template>
<div>{{num}}</div>
<a-table
class="ant-table-striped"
size="middle"
:columns="columns"
:data-source="data"
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
/>
</template>
<script>
import { defineComponent, ref } from 'vue'
const columns = [
{
title: 'Name',
dataIndex: 'name',
customRender: function ({ text }) {
return <span style="color: red;cursor: pointer;" onClick={changeNum}>{text}</span>
}
}, {
title: 'Age',
dataIndex: 'age'
}, {
title: 'Address',
dataIndex: 'address'
}
]
const num = ref(0)
const changeNum = () => {
num.value++
}
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park'
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park'
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park'
}, {
key: '4',
name: 'Ben Kang',
age: 15,
address: 'Sidney No. 1 Lake Park'
}]
export default defineComponent({
setup () {
return {
data,
columns,
num,
changeNum
}
}
})
</script>
AI 代码解读
3、vue3x+antd3x+ts
<template>
<div>{{num}}</div>
<a-table
class="ant-table-striped"
size="middle"
:columns="columns"
:data-source="data"
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
/>
</template>
<script lang="ts">
import { ref, defineComponent, h, VNode } from 'vue'
const columns = [
{
title: 'Name',
dataIndex: 'name',
customRender: function ({ text }):VNode {
return h('div', {
style: {
color: 'red',
cursor: 'pointer'
},
class: 'name',
onClick: changeNum
}, text)
}
},
{ title: 'Age', dataIndex: 'age' },
{ title: 'Address', dataIndex: 'address' }
]
const num = ref(0)
const changeNum = () => {
num.value++
}
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park'
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park'
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park'
},
{
key: '4',
name: 'Ben Kang',
age: 15,
address: 'Sidney No. 1 Lake Park'
}
]
export default defineComponent({
setup () {
return {
data,
columns,
num,
changeNum
}
}
})
</script>
AI 代码解读
二、插槽写法
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex == 'itemStatus'">
<a-switch :checked="record.itemStatus"
:checked-value="1"
:unchecked-value="0"/>
</template>
</template>
AI 代码解读
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex == 'itemStatus'">
<a-tag v-if="record.itemStatus == 1" color="red">启用</a-tag>
<a-tag v-else color="green">禁用</a-tag>
</template>
</template>
AI 代码解读
三、数据处理（只针对翻译）
listTable.value.forEach(e => {
e.itemStatus =e.itemStatus == 1 ? '是' : '否';
});
AI 代码解读
注意： 编辑后记得刷新，建议使用前两种方法，嘿嘿~
