vue3.2二次封装antd vue 中的Table组件，原有参数属性不变

vue3.2中的<script setup>语法

在项目中多处使用到表格组件,所以进行了一个基础的封装,主要是通过antd vue 中表格的slots配置项,通过配合插槽来进行封装自定义表格;

这次主要的一个功能是编辑之后变成input框 修改了之后变成完成发送请求重新渲染表格：

子组件的代码：这样封装不会改变antd 官网示例参数的传递方式

<template>
<!--  v-bind处理a-table 传递过来的参数-->
  <a-table ref="KldTable" class="kld-table" v-bind="attrs">
    <!-- 处理 slots ，动态渲染插槽需要使用这种方式-->
    <template v-for="key in renderArr " #[key]="{ record, column, text, index }">

<!-- 通过这个插槽传递数据给父组件,做一些编辑提交的操作等等 -->
      <slot :name="key" :text="text" :column="column" :record="record" :index="index"></slot>
    </template>
  </a-table>
</template>

<script lang="ts">
import { ref,useSlots  } from 'vue';

import { Table } from 'ant-design-vue';
export default {
  name: "KldTable",
  setup(_, { attrs, emit }) {
// 插槽的实例
    const slots = useSlots()
    const renderArr = Object.keys(slots)
    return {
      attrs,
      listeners: emit,
      KldTable: ref(),
renderArr 
    };
  },
  components: {
    ATable: Table
  }
};
</script>

 父组件的使用：子组件全局注册了，所以父组件没有引入

<template>
    <kld-table :columns="columns" :data-source="dataSource">
        <!-- 通过columns 里面对象来遍历生成 可编辑的组件, 不能编辑序号是因为是因为没有传过去slots , 所以及时columns里面包含序号,但是由于表格组件渲染插槽没有他,所以不会序号不可编辑,通过给操作自定义一个属性,来避免渲染生成操作-->
        <template v-slot:[item.dataIndex]="{ record, text, column }" v-for="item in columns">
            &l