vue3+ts+elementPlus实现table表格+分页器组件

<template>
    <div class="table-pagination">
        <div class="td-table">
            <el-table 
                :data="tableData" 
                style="width: 100%"
                @row-click="rowClick">
                <el-table-column v-if="showIndex" type="index" width="50" :align="'center'">
                    <template #header>#</template>
                </el-table-column>
                <el-table-column 
                    v-for="(item,index) in titleData"
                    :align="'center'"
                    :key="index"
                    :prop="item.prop" 
                    :label="item.name"
                    :width="item.width || 'auto'" 
                    >
                    <template #header v-if="item.htmlHeader">
                        <!-- 自定义表头 -->
                        <div v-html="item.htmlHeader"></div>
                    </template>
                    <template #default="props">
                        <div v-if="item.type==='tooltip'">
                            <el-tooltip
                                class="item-name"
                                :content="props.row[item.prop]"
                                :show-after="500"
                                placement="top-start"
                            >
                                <div>{{props.row[item.prop]}}</div>
                            </el-tooltip>
                        </div>
                        <!-- 自定义内容 -->
                        <div v-else-if="item.htmlContent" v-html="item.htmlContent(props.row)"></div>
                        <span v-else-if="item.operateList">
                            <span 
                                class="operate-item"
                                v-for="(child, childIndex) in item.operateList" 
                                :key="child.id" 
                                :style="{color: child.color||'rgba(55, 126, 246, 1)'}"
                                @click="operateFunc(props.row, child, props.$index)">
                                <span v-if=" !operateJudge || (operateJudge && props.row.showsOperate?.includes(childIndex))">{{child.name}}</span>
                            </span>
                        </span>
                        <span v-else>
                            {{props.row[item.prop]}}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="td-pagination" v-if="showPagination">
            <el-pagination
                small
                :current-page="pageNum"
                :page-size="pageSize"
                :page-sizes="pageSizes"
                layout="total, prev, pager, next, sizes, jumper"
                :total="total"
                class="mt-4"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script lang="ts" setup>

    const emit = defineEmits(['operateBack', 'rowClick', 'setPageSize', 'setPageNum']);
    withDefaults(
        defineProps<{
            tableData: any; //表格数据 [{id:1,name:'张三',desc:'喜欢游泳'}]
            titleData: any; //表头数据
            //[{prop:'name',name:'节点', width:200, htmlHeader: '字符型模板，自定义header', htmlContent: '字符型模板，自定义内容区'},
            // {prop:'desc',name:'描述',type :'tooltip',width:'200'},
            // {prop:'id',name:'操作',operateList:[
            //     {id:'del', name:'删除', color: 'red'},
            // ]}]
            operateJudge?: boolean; //操作按钮根据不同项判断显示哪些
            showIndex?: boolean; //是否显示编号
            showPagination?: boolean; //是否显示分页器
            pageNum?: number; //当前页
            pageSize?: number; //每页显示条数
            total?: number; //总数
            pageSizes?: any; //每页可显示条数数组
        }>(),
        {
            tableData: [],
            titleData: [],
            operateJudge: false,
            showIndex: false,
            showPagination: false,
            pageNum: 1,
            pageSize: 10,
            total: 0,
            pageSizes: [10,20,40,60],
        },
    );

    
    const handleSizeChange = (val: number) => {
        emit('setPageSize', val)
    }
    const handleCurrentChange = (val: number) => {
        emit('setPageNum', val)
    }
    function operateFunc(item:any, child:any, itemIndex:number){
        emit('operateBack', item, child, itemIndex)
    }
    function rowClick(data:any){
        emit('rowClick', data)
    }
</script>

<style lang="less">
.table-pagination{
    width: 100%;
    height: 100%;
    .td-table{
        width: 100%;
        height: 100%;
        .operate-item{
            cursor: pointer;
            &:not(:last-child){
                margin-right: 8px;
            }
        }
        .input-num-style{
            .el-input__inner{
                font-size: 14px;
            }
        }
        .cell{
            padding: 0 8px !important;
        }
        .el-tooltip__trigger{
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 90% !important;
            white-space: nowrap;
        }
    }
    .td-pagination{
        margin-top: 16px;
    }
}
</style>