vue3 antd封装table组件

1.子组件table

<a-table
   :pagination="false"//关闭自身带的分页
   :dataSource="dataSource"//表格数据
   :columns="columns"//表头
   :row-selection="{//前面的选择框
      selectedRowKeys: selectedRowKeys,
      onChange: onSelectChange,
    }"
>
　　//插槽
   <template v-slot:[item]="scope" v-for="item in renderArr">
       <slot :name="item" :scope="scope" v-bind="scope || {}"></slot>
   </template>
</a-table>

然后引入useSlots

import { reactive, useSlots } from "vue";

setup(props, { emit }) {
    const slots = useSlots();
    const renderArr = Object.keys(slots);
    const data = reactive({
       renderArr,
    })
    return {
      ...toRefs(data),
    };
}

1.父组件掉用子组件table

<Wtable
  :dataSource="dataSource"
  :columns="columns"
  :isShowSelect="isShowSelect"
>
  <template #Action="{ record }">
     <span>
       <a-popconfirm
         placement="top"
         ok-text="是"
         cancel-text="否"
         @confirm="delOkItem(record)"
       >
         <template #title>
           <p>确认删除?</p>
         </template>
         <a class="mrg">删除</a>
       </a-popconfirm>
     </span>
  </template>
</Wtable>

引入子组件

import Wtable from "../../components/Wtable/index.vue";

标签：const,..,useSlots,vue3,组件,antd,slots,table
来源： https://www.cnblogs.com/newBugs/p/15924134.html