vue3 ant design table中插槽使用

一、CustomRender写法

const columns: any[] = [
	{
    title: "是否启用",
    dataIndex: "itemStatus",
    customRender: (text, record, index) => {
      return text.text == 1 ? "否" : "是"
    }
  },
]

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>

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>

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: ({ text }) => {
      return h("div", [
			record.name == "John Brown"
				? h("div", { style: { color: "#0f0" } }, text )
				: h(
						"div",
						{
							style: {
								color: "pink",
								cursor: "pointer",
							},
							onClick: () => console.log("111"),
						},
						"美丽"
				  ),
			h( "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>

二、插槽写法

<template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex == 'itemStatus'">
          <a-switch :checked="record.itemStatus"
                :checked-value="1"
                :unchecked-value="0"/>
        </template>
</template>

<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>

三、数据处理（只针对翻译）

listTable.value.forEach(e => {
    e.itemStatus =e.itemStatus == 1 ? '是' : '否';
});

注意： 编辑后记得刷新，建议使用前两种方法，嘿嘿~