说明:使用的时候需要把封装组件里的接口请求字段改成自己接口的 比如 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>