vue3 ant table组件二次封装

说明：使用的时候需要把封装组件里的接口请求字段改成自己接口的 比如 pageIndex success之类的字段

1.用法

<template>
    <ProTable :columns="columns" :getList="getList" :onDataUpdate="onDataUpdate" size="middle" :bordered="true"
        :scroll="{ y: 700 }">
        <template #formSearch>
            <a-form-item :label="'姓名'">
                <a-input v-model:value="search.name" placeholder="placeholder"></a-input>
            </a-form-item>
            <a-form-item :label="'姓名'">
                <a-input v-model:value="search.name" placeholder="placeholder"></a-input>
            </a-form-item>
            <a-form-item :label="'姓名'">
                <a-input v-model:value="search.name" placeholder="placeholder"></a-input>
            </a-form-item>
        </template>
        <template #btnOption>
            <a-space>
                <a-button type="primary">数据导出</a-button>
                <a-button type="primary">上传</a-button>
                <a-button type="primary">下载</a-button>
                <a-button type="primary">打印</a-button>
            </a-space>
        </template>
        <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'Weight'">
                <span>
                    <a>Invite 一 </a>
                </span>
            </template>
        </template>
    </ProTable>
</template>
<script setup>
import ProTable from '@/components/ProTable'
import { axios } from '@/common/request/index'
import { reactive } from '@vue/reactivity';

const columns = [{
    title: '编号',
    dataIndex: 'ProNo',
    key: 'ProNo',
}, {
    title: '名称',
    dataIndex: 'ProName',
    key: 'ProName',
    customRender: () => <a>smcscms</a>
}, {
    title: 'Code',
    dataIndex: 'Code',
    key: 'Code',
}, {
    title: 'Weight',
    key: 'Weight',
    dataIndex: 'Weight',
}, {
    title: 'Length',
    dataIndex: 'Length',
    key: "Length"
}];
const search = reactive(
    {
        name: 'a'
    }
)
const getList = (pageObj) => {
    // 查询
    if (pageObj.requestType === '1') {

    }
    // 重置
    if (pageObj.requestType === '0') {

    }
    const params = { ...pageObj, ...search }
    return axios.get('/proxyapi/api/wms/Product', params, { noMessage: true })
},
    onDataUpdate = (data) => data
</script>

2. 封装组件

<template>
    <a-card v-if="ifShowCard">
        <a-form>
            <SlotSelf />
        </a-form>
        <div class="search-btn">
            <slot name="btnOption"></slot>
        </div>
    </a-card>
    <a-table class="self-table" :pagination="props.pagination" :columns="getSorter(props.columns)"
        :data-source="tableList" :loading="loading" v-bind="attrs">
        <template v-for="(value, key) in slot" v-slot:[key]="slotProps" :key="key">
            <slot :name="key" v-bind="slotProps"></slot>
        </template>
    </a-table>
    <div class="pagination">
        <a-pagination v-if="!props.pagination" showSizeChanger :pageSizeOptions="pageSizeOptions"
            v-model:current="pageObj.pageIndex" v-model:pageSize="pageObj.pageSize" :total="pageObj.total"
            :show-total="total => `共 ${total} 条`" @change="onChange" @showSizeChange="showSizeChange">
        </a-pagination>
    </div>
</template>
<script>
export default {
    name: 'ProTable',
    inheritAttrs: false,
}
</script>
<script setup>
import { defineProps, onMounted, reactive, readonly, ref, useAttrs, useSlots, defineComponent, defineEmits, computed, defineExpose } from 'vue'
import { getSorter } from '@/common/utils/sort'
import { configObj } from '@/config'
import { message } from 'ant-design-vue';

const props = defineProps({
    columns: {
        type: Array,
        default: []
    },
    getList: {
        type: Function,
        required: true
    },
    pagination: {
        type: Boolean,
        default: false
    },
    onDataUpdate: {
        type: Function,
    },
    folding: {
        type: Boolean,
        default: true
    }
}),
    emit = defineEmits(['search', 'reset']),
    pageObj = reactive({
        pageIndex: 1,
        pageSize: configObj.defaultPageSize,
        total: 0,
        requestType: '1', // 1查询   0重置
    }),
    tableList = ref([]),
    pageSizeOptions = readonly(configObj.pageSizeOptions),
    attrs = useAttrs(),
    slot = useSlots(),
    folding = ref(props.folding),
    loading = ref(false)

const Zhankai = defineComponent(() => {
    const foldingFn = () => folding.value = !folding.value
    return () => folding.value ? <span style={{ color: 'red', cursor: 'pointer' }} onClick={foldingFn}>展开</span> : <span style={{ color: 'red', cursor: 'pointer' }} onClick={foldingFn}>收起</span>
})
const SlotSelf = defineComponent(() => {
    const slots = slot?.formSearch?.() ?? [],
        ColSelf = ({ item }) => <a-col xxxl={4} xxl={4} xl={6} lg={8} xs={12}>{item}</a-col>
    return () => <>
        {
            <a-row gutter={20}>
                {
                    folding.value ? slots.slice(0, 5).map(item => <> <ColSelf item={item} /> </>) : slots.map(item => <>  <ColSelf item={item} /> </>)
                }
                <ColSelf item={slots.length > 0 ? <a-space>
                    <a-button type="primary" onClick={() => search(1)}>查询</a-button>
                    <a-button onClick={() => search(0)}>重置</a-button>
                    {slots?.length > 5 && <Zhankai />}
                </a-space> : ''} />
            </a-row>
        }
    </>
})
// 列表请求
const requestList = async () => {
    if (loading.value) return
    loading.value = true
    const { Success, Message, Data } = await props?.getList?.(pageObj).catch(res => {
        // debugger
        loading.value = false
    })
    loading.value = false
    if (!Success) return message.error(Message);
    pageObj.total = Data.TotalCount
    if (props?.onDataUpdate) tableList.value = props?.onDataUpdate?.(Data.Data) ?? []
    else tableList.value = Data?.Data ?? []
},
    search = (type) => {
        pageObj.pageIndex = 1
        pageObj.requestType = type
        pageObj.pageSize = configObj.defaultPageSize
        requestList()
    }

// 分页相关
const onChange = (pageIndex) => {
    pageObj.pageIndex = pageIndex
    requestList()
},
    showSizeChange = (pageIndex, pageSize) => {
        Object.assign(pageObj, {
            pageIndex: 1,
            pageSize
        })
    }
const ifShowCard = computed(() => slot?.formSearch?.().length && slot?.btnOption?.().length)
onMounted(() => {
    requestList()
})
defineExpose({
    refresh: search(1)
})
</script>
<style lang="less" scoped>
.self-table {
    margin-top: 10px
}

.pagination {
    margin-top: 10px;
    text-align: right;
}

.search-btn {
    margin-top: 10px
}
</style>