ts二次封装element-ui的table表格，带loading，分页

不念不忘少年蓝@ 2023-03-01 13:28 27阅读 0赞

**新建文件tablePage.vue**

<template>
        <div id="table_page">
            <el-table 
                ref="vtable" 
                v-loading="loading"
                @row-click="rowClick" 
                @select="select" 
                @select-all="select" 
                @current-change="rowChange"
                @selection-change="handleSelectionChange"
                :data="data" 
                size="mini" 
                stripe 
                style="width: 100%" 
                highlight-current-row 
                :header-cell-style="headerStyle" 
                :cell-style="cellStyle" 
                :row-style="rowStyle"
            >
                <el-table-column 
                    v-if="selection"
                    type="selection"
                    width="55">
                </el-table-column>
                <template v-for="(item,index) in column">
    				<el-table-column 
    					v-if="!item.slot" 
    					:key="index" 
    					:prop="item.prop" 
    					:width="item.width" 
    					:label="item.label" 
    					:align="item.align || 'center'" 
                        :fixed="item.fixed"
                    >
    				</el-table-column>
    				<el-table-column 
    					v-if="item.slot" 
    					:key="index" 
    					:label="item.label" 
    					:prop="item.prop" 
    					:width="item.width" 
                        :fixed="item.fixed"
    					:align="item.align || 'center'">
    					<template #default="{ row, $index }">
    						<slot :name="item.slot" :index="$index" :row="row" :value="row[item.prop]" :prop="item.prop"></slot>
    					</template>
    				</el-table-column>
    			</template>
            </el-table>
            <el-pagination
                v-if="page"
                @current-change="handleCurrentChange"
                layout="total, prev, pager, next"
                :current-page.sync="page.PageIndex"
    			:total="page.PageTotal" 
    			:page-size="page.PageSize">
            </el-pagination>
        </div>
    </template>
    
    <script lang="ts">
    import {  Component, Vue, Prop } from "vue-property-decorator"
    import {  Table } from 'element-ui'
    
    @Component({ 
        props: { 
            data: { 
                type: Array,
                required: true
            },
            selection: { 
                type: Boolean,
            },
            column: { 
                type: Array,
                required: true
            },
            height: { 
                type: String
            },
            page: { 
                required: true,
                type: [Object, Boolean],
                default: function() { 
                    return { 
                        PageIndex: 20,
                        PageTotal: 0,
                        PageSize: 1
                    }
                }
            },
            rowStyle: { 
                type: [Function, Object],
                default: function() { 
                    return { }
                }
            },
            cellStyle: { 
                type: [Function, Object],
                default: function() { 
                    return { }
                }
            },
            headerStyle: { 
                type: [Function, Object],
                default: function() { 
                    return { 
                        backgroundColor: "rgb(221, 221, 221)",
                        color: "black"
                    }
                }
            },
            index: { 
                type: Boolean,
                default: false
            },
            check: { 
                type: Boolean,
                default: false
            },
            loading: { 
                type: Boolean,
                default: false
            },
            rowClick: { 
                type: Function,
                default: function(){ }
            },
        },
        components: { 
        }
    })
    export default class TablePage extends Vue { 
    
    
        public handleCurrentChange(val: number) { 
            this.$emit("page", val);
            console.log(val)
        }
    
        public select(selection: object[], row:object) { 
            this.$emit("select", selection, row);
        }
    
        public clear(){ 
            (this.$refs["vtable"] as Table).clearSelection();
        }
    
        public toggle(){ 
            (this.$refs["vtable"] as Table).toggleAllSelection();
        }
    
        public rowChange(selection: object[], row:object){ 
            this.$emit("rowChange", selection, row);
        }
    
        public handleSelectionChange(selection: object[]){ 
            this.$emit("handleSelectionChange", selection);
        }
    
    }
    </script>
    
    <style scoped>
        #table_page { 
            /* height: 100%; */
        }
        /* #table_page .el-table { 
            height: calc(100% - 50px);
        } */
        #table_page .el-table { 
            position: relative;
            margin-bottom: 33px;
        }
    
        #table_page .el-pagination { 
            float: right;
            position: fixed;
            bottom: 0;
            z-index: 10;
            right: 0;
            background: #fff;
            text-align: right;
            border-top: 1px solid #eee;
            width: 100%;
        }
    </style>

依次解释：  
v-loading：对表格添加加载效果。  
@row-click：当某一行被点击时会触发该事件。  
@select：当用户手动勾选数据行的 Checkbox 时触发的事件  
@select-all：当用户手动勾选全选 Checkbox 时触发的事件  
@current-change：当表格的当前行发生变化的时候会触发该事件，可以拿到用户当前选中的行数据（无checkbox情况下）。如果要高亮当前行，请打开表格的 highlight-current-row 属性  
@selection-change：当选择项发生变化时会触发该事件,选中checkbox和取消时都会触发，可以用来获取用户选中的数据。  
:data：数组  
stripe：是否为斑马纹 table  
highlight-current-row：是否要高亮当前行  
:header-cell-style：表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。  
:cell-style:单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。  
:row-style：行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。  
实例：

import vtable from "@/components/common/TablePage.vue";
    components: { 
        vtable
      }
    <vtable
            ref="vtable"
            :page="page"
            @page="pageChange"
            v-loading="loading"
            :data="tableData"
            @select="changeList"
            :selection="true"
            :column="column"
            :headerStyle="{background: '#fff'}"
          >
    </vtable>

**ts部分：**

//初始化page,Models是我管理interface接口校验的文件，在这里也粘一下
      // 分页interface
    export interface Page { 
        PageIndex: number
        PageTotal: number
        PageSize: number
    }
    //分页初始化数据，这里可以与后端约定返回的字段名称
      private page: Models.Page = { 
        PageIndex: 1,
        PageTotal: 0,
        PageSize: 20
      };
      //
        public pageChange(e: number) { 
        //拿到用户点击的页码
        this.page.PageIndex = e;
        console.log(e);
        //nextPage是封装好的方法，也粘出来
        // 获取下一页页数
    	//export const nextPage = (curPage: number, pageSize: number) => { 
        //return (curPage - 1) * pageSize
    	//}
    	//searchForm是el-form的表单数据对象，是做列表筛选功能
        this.searchForm.skipCount = nextPage(e, this.page.PageSize);
        //更新列表
        this.getProductList();
      }
      //Loading效果使用
      private async getProductList() { 
        this.loading = true;
        try { 
          let res = await GetMixedProducts.request(this.searchForm);
          this.tableData = res.items;
          if (res.items) { 
            this.page.PageTotal = res.totalCount!;
          }
        } catch (error) { 
        } finally { 
          this.loading = false;
        }
      }
      //勾选数据行时触发
        private changeList(selection: Models.Product[], row: Models.Product) { 
        this.checkList = [];
        selection.forEach(element => { 
          this.checkList.push(element.id);
        });
      }
      //方便理解，把product粘出来
      // 商品列表 node
    export interface Product { 
        name: string
        productNumber: string
        saleName: string
        displayOrder: number
        isPublished: boolean
        productCoverThumbPictureUrl: string
        isPortal: boolean
        stockQuantity: number
        hasProductPrice: boolean
        usedForMaintenance: boolean
        isComobo: boolean
        id: string
    }
    //column
    private readonly column = [
        { 
          label: "商品图片",
          slot: "productCoverThumbPictureUrl",
          width: 140
        },
        { 
          label: "产品名称",
          prop: "name"
        },
        { 
          label: "商品名称",
          prop: "saleName"
        },
        { 
          label: "商品编号",
          prop: "productNumber",
          width: 120
        },
        { 
          label: "是否销售商品",
          slot: "isPortal",
          width: 120
        },
        { 
          label: "是否服务配件",
          slot: "usedForMaintenance",
          width: 120
        },
        { 
          label: "是否套装商品",
          slot: "isComobo",
          width: 120
        },
        { 
          label: "显示顺序",
          prop: "displayOrder",
          width: 120
        },
        { 
          label: "上架状态",
          slot: "isPublished",
          width: 120
        },
        { 
          label: "操作",
          slot: "operate",
          width: 180
        }
      ];