vue3 Ant-Design-Vue table :custom-cell 属性用法

在 Ant-Design-Vue Table 中，`custom-cell` 属性用于自定义表格单元格的渲染方式。它可以让您使用自己的 Vue 组件或原生 HTML 元素来渲染表格单元格，从而实现自定义的表格单元格样式和功能。

使用 `custom-cell` 属性的基本语法如下：

<a-table-column title="Title" dataIndex="dataIndex" custom-cell="renderCell"></a-table-column>

其中，`title` 属性用于指定表头标题，`dataIndex` 属性用于指定数据源中的字段名，`custom-cell` 属性用于指定渲染表格单元格的函数名。

接下来，您需要定义一个名为 `renderCell` 的函数来实现表格单元格的自定义渲染。例如，您可以在 Vue 组件中定义一个名为 `CustomCell` 的组件，然后在 `renderCell` 函数中返回该组件的实例，如下所示：

<template>
  <div>
    <span>{{text}}</span>
    <a-button type="primary" @click="onClick">Click</a-button>
  </div>
</template>

<script>
export default {
  props: ['text'],
  methods: {
    onClick() {
      console.log('button clicked!')
    }
  }
}
</script>

methods: {
  renderCell(h, data) {
    return h(CustomCell, {
      props: {
        text: data.text
      }
    })
  }
}

这样，您就可以将自定义组件 `CustomCell` 作为表格单元格的渲染方式，从而实现自定义的表格单元格样式和功能。