赞
踩
在table数据请求的过程 过于频繁,从而导致页面代码多,封装的目的就是减少相同代码,提高在开发中的效率
import { ExtractPropTypes, PropType } from 'vue'
export const tableProps = {/** 是否显示分页 */pagination: {type: Boolean,default: true},/** 请求地址 */url: {type: String,default: ''},/** 默认数据源 */data: {type: Array,default: () => []},/** 请求参数 */params: {type: Object,default: () => ({})},/** 是否立即请求 */init: {type: Boolean,default: true},/** 是否重新加载 */reload: {type: Boolean,default: false},/** 默认显示列 */defaultColumns: {type: Array as PropType<string[]>,default: () => []}
}
export type TableProps = ExtractPropTypes<typeof tableProps>
import { SetupContext } from 'vue'
import { ElTable, ElPagination, vLoading } from 'element-plus'
import { TableProps, tableProps } from './table-props'
import './table.scss'
import { useDataSource } from './composable/userDataSource'
import tableColumn from './TableColumn'
import initMethods from './tableMethods'
export default defineComponent({directives: { loading: vLoading },props: tableProps,emits: ['load', 'update:reload'],setup(props: TableProps, context: SetupContext) {const { slots, attrs, expose } = contextconst tableHeader = slots['table-header']const tableFooter = slots['table-footer']const { paginationState, table, onSortChange } = useDataSource(props, context)const { renderVNode } = tableColumn(props, context)// 初始化 el-table 方法const refTable = ref()const methodObj = initMethods(refTable)expose(methodObj)return () => {// 分页器const paginationEl = (<ElPaginationv-model:current-page={paginationState.currentPage}v-model:page-size={paginationState.pageSize}page-sizes={[10, 20, 30, 50]}total={paginationState.total}layout="total, sizes, prev, pager, next, jumper"class="mt-10px justify-end"/>)return (<div class="c-table h-full flex-1 flex flex-col">{/* 表格头区域 */}<div class="c-table-header mb-10px">{tableHeader && tableHeader()}</div>{/* 表格区域 */}<ElTableref={refTable}v-loading={table.loading}data={table.dataSource}{...attrs}onSort-change={onSortChange}>{renderVNode.value}</ElTable>{/* 表格尾区域 */}<div class="c-table-footer">{tableFooter && tableFooter()}{props.pagination && paginationEl}</div></div>)}}
})
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。