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";