antd开发table slot注入笔记

在实际开发中遇到，antd的talbe在引入slot时未起作用

• 错误演示

     <Table
          columns={[{name:"test",scopedSlots: { customRender: 'name' },}]}
          dataSource={data.value}
          v-slots={{
            name: (arg: any) => {
              return arg.value;
            },
          }}
        ></Table>

源码分析

在翻源码发现其注入方式为 1、table引入slot并注入到contextSlots中进行合并 2、中column生成，调用useColumns 3、所有默认slot 4、提示应使用slot

实际开发使用用例，没有slot

• scopedSlots: { customRender: 'name' } * 这种写法时2.0写法，在tsx中不存在，antd使用函数方式来对接老写法，就是将所有的Columns给bodyCell 来处理，写法接近react，从表象看应该是react转vue时对slot使用有些误解，因官方没给出具体说明，在此记录方便查看。整体上不太友好，凑合用吧。

import { Table } from "ant-design-vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "PageTable",
  setup() {
    // TODO:响应
    let data = ref([
      {
        key: 1,
        name: "test",
      },
    ]);
    const columns = [
      {
        title: "name",
        dataIndex: "name",
        width: "25%",
      },
      {
        title: "name2",
        dataIndex: "name2",
        width: "25%",
      },
    ];

    return () => (
      <article class="PageTable">
        <Table
          bordered
          columns={columns}
          dataSource={data.value}
          v-slots={{
            bodyCell: (arg: any) => {
              return arg.value;
            },
          }}
        ></Table>
      </article>
    );
  },
});