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 class="mrg" @click="del(record)">刪除</a>

       </span>

  </template>
</Wtable>

import { ref, createVNode } from "vue";

import { Modal } from "ant-design-vue";

import { ExclamationCircleOutlined } from "@ant-design/icons-vue";

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

 

const del = (val) => {

 Modal.confirm({

   title: () => "您確定要刪除嗎?",

   icon: () => createVNode(ExclamationCircleOutlined),

   content: () => "該操作不可逆！",

   okText: () => "確定刪除",

   okType: "danger",

   cancelText: () => "再想想",

   onOk() {

     console.log("OK");

   },

　 onCancel() {

　 　console.log("Cancel");

　 },

 });

}