vue3封装element中table组件

由于本人工作中用的的管理系统较多 

表格+分页的格式很多  封装很有必要

1. 新建table组件文件   

   <template>
   	<el-table 
   		v-bind="$attrs"
   		:data="data"
   		:height="'calc( 100% - 20px )'"
   	>
   		<!-- 是否需要序号 -->
   		<el-table-column v-if="hasIndex" type="index" width="70" label="序号" />
   		<template
   			v-for="column in columns"
   			:key="column.prop"
   		>
   			<!-- 操作按钮列 -->
   			<el-table-column 
   				v-if="column.prop=='oper'"
   				v-bind="column"
   				#default="scope"
   			>
   				<el-button size="small" v-for="btn in column.operArr" :key="btn" v-bind="btn"  @click="btn.handleClick(scope.row)">
   					{{btn.label}}
   				</el-button>
   			</el-table-column>
   			<el-table-column 
   				v-else
   				v-bind="column"
   				#default="scope"
   			>
   				<el-button v-if="column.clickFun" type="primary" link @click="column.clickFun(scope.row,column.prop)">{{ scope.row[column.prop] }}</el-button>
   				<template  v-else>{{ scope.row[column.prop] }}</template>
   
   				<!-- 组合表头 -->
   				<template v-if="!!column.childrens">
   					<el-table-column show-overflow-tooltip v-for="columnC in column.childrens" :key="columnC.prop"  :prop="columnC.prop" :label="columnC.label">
   						
   						<template #default="scopeI">
   							<el-button v-if="columnC.clickFun" type="primary" link @click="columnC.clickFun(scopeI.row,columnC.prop)">{{ scopeI.row[columnC.prop] }}</el-button>
   							<template  v-else>{{ scopeI.row[columnC.prop] }}</template>
   						</template>
   					</el-table-column>
   				</template>
   			</el-table-column>
   		</template>
   	</el-table>
   	<el-pagination 
   		v-if="hasPage"
   		class="table_pagination"
   		background
   		layout="total, prev, pager, next, sizes"
   		:total="pageProps.total"
   		:current-page="pageProps.currentPage"
   		:page-size="pageProps.pageSize"
   		@size-change="handleSizeChange"
   		@current-change="handleCurrentChange"
   	
   	/>
   </template>
   
   <script lang="ts" setup>
   	const props= defineProps({
       data: {
   			type: Array,
   			default(){
   					return []
   			}
       },
   		columns: {
   			type: Array,
   			default(){
   					return []
   			}
       },
   		pageProps: {
   			default(){
   				return {
   					currentPage: 1,
   					total: 0,
   					pageSize: 10
   				}
   			}
   		},
   		handleSizeChange: {
         type: Function,
       },
   		handleCurrentChange: {
         type: Function,
       },
   		hasIndex: {
   			type: Boolean,
   			default(){
   				return true
   			}
   		},
   		hasPage: {
   			type: Boolean,
   			default(){
   				return true
   			}
   		},
      
     })
   
   
   	
   
   </script>
   <style scoped>
   	.table_pagination{
   		position: relative;
           top: -19px;
           float: right;
           margin-top: 0px;
   		right: 1px;
   	}
   </style>

   我这里表格可配置 序号 操作列 需要加链接的td 普通的td 及分页的数据等

2. 列表页面引入

   <my-table 
      show-summary
      :data="tableData" 
      :columns="column" 
      stripe
      :pageProps="pageProps"
      :handleCurrentChange="handleCurrentChange"
      :handleSizeChange="handleSizeChange"
     >
    </my-table>

3. 配置表格表头

   {prop: 'dataTypeDesc',label: '数据类型', },
       {prop: 'errorTypeDesc',label: '按错误量统计', childrens: [
         {prop: 'errorNum', label: '上传错误', clickFun: cellClick},
         {prop: 'finishNum', label: '重新', clickFun: cellClick},
         {prop: 'unFinishNum', label: '问题', clickFun: cellClick},
         {prop: 'unFinishNum', label: '解决成功', clickFun: cellClick},
       ] },
       {prop: 'errorTypeDesc',label: '按ID量统计', childrens: [
         {prop: 'errorNum', label: '上传错误的', clickFun: cellClick},
         {prop: 'finishNum', label: '重新上传成功', clickFun: cellClick},
         {prop: 'unFinishNum', label: '解决进度', clickFun: cellClick},
       ] },
     
       {prop: 'finishRatio', label: '解决率'},

4. 配置数据

        请求回来给tableData和pageProps.total赋值就可以了