element plus table封装

前言

在table数据请求的过程 过于频繁，从而导致页面代码多，封装的目的就是减少相同代码，提高在开发中的效率

封装的目的及好处

• 隐藏实现细节，逻辑统一处理，只需传递参数内容
• 低耦合，利于全局扩展，继承所有elemenet plus table的属性及方法
• 只需配置一个参数及可控制列的显示和隐藏

源码

• table-props.ts

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> 

• table.tsx

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>)}}
})