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

二、插槽写法

<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 ? '是' : '否';
});

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