a-table customRow 的使用

`a-table` 是 Ant Design Vue 中的一个表格组件，它提供了丰富的定制功能，其中 `customRow` 是一个重要的特性，用于自定义行内容渲染。当你需要在每一行数据上添加额外的操作、展示动态的数据或者是复杂的结构时，可以利用 `customRow`。

`customRow` 需要设置在一个 table 组件的 `row-class-name` 或 `row-style` 属性下，接收一个函数作为值，这个函数会在渲染每一行时被调用，传入当前行的原始数据对象。你可以在这个函数内部根据数据来返回一个完整的 row 对象，包括 `tr` 元素的 class 和 style。

基本的使用示例如下：

<template>
  <a-table :data="tableData" :customRow="customRenderFn">
    <!-- ...其他列配置 -->
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据...
      ],
    };
  },
  methods: {
    customRenderFn(row) {
      // 根据 row 数据构建自定义的 row 对象
      return {
        tr: {
          // 返回一个包含 class 和 style 的对象
          className: 'your-custom-class',
          style: { 'background-color': 'red' }, // 可以设置样式
        },
        children: [
          // 如果需要在行内添加额外的元素，可以直接返回数组
          // 比如添加按钮或其他行内元素
          <span>{row.customField}</span>,
        ],
      };
    },
  },
};
</script>