el-table表格 及其el-pagination分页 封装及其使用

1、首页在components文件夹中新建table文件夹

table文件夹下table.vue全部代码：

<template><el-table:stripe="stripe":row-key="handlerRowKey()":tree-props="treeProps":border="border":show-summary="showSummary":data="tableData":lazy="lazy":load="treeLoad"style="width: 100%"@cell-click="editCell"@row-click="rowClick"@row-dblclick="rowDblclick":span-method="objectSpanMethod":cell-style="cellStyle":formatter="formatter":height="height"@selection-change="selectionChange":summary-method="summaryMethod"v-loading="loading"element-loading-text="数据加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(7, 25, 39, 0.5)"ref="table"><el-table-columnv-if="selection"type="selection"width="55"align="center"/><el-table-columnv-if="index"type="index":index="indexMethod"label="序号"align="center"width="50"/><!-- 含有多级表头的表格,最多两级 --><template v-if="moreLevel"><template v-for="(coumn, index) in columnOption" :key="index"><el-table-columnv-if="coumn.slot"align="center":prop="coumn.prop":label="coumn.label || coumn.name":width="coumn.width":min-width="coumn.minWidth":fixed="coumn.fixed":formatter="coumn.formatter"><template v-if="coumn.children"><el-table-columnv-for="(itemChild, childIndex) in coumn.children":key="childIndex":prop="itemChild.prop":label="itemChild.label || itemChild.name":align="itemChild.align || 'center'":width="itemChild.width":min-width="itemChild.minWidth":fixed="itemChild.fixed":formatter="itemChild.formatter"><template v-slot="{ row }"><slot :name="itemChild.slot" :row="row" /></template></el-table-column></template><template v-if="!coumn.children" v-slot="{ row }"><slot :name="coumn.slot" :row="row" /></template></el-table-column><el-table-columnv-else:prop="coumn.prop":label="coumn.label":align="coumn.align || 'center'":width="coumn.width":min-width="coumn.minWidth":fixed="coumn.fixed"><template v-if="coumn.children"><templatev-for="(itemChild, childIndex) in coumn.children":key="childIndex"><el-table-columnv-if="itemChild.slot"align="center":prop="itemChild.prop":label="itemChild.label || itemChild.name":width="itemChild.width":min-width="itemChild.minWidth":fixed="itemChild.fixed":formatter="itemChild.formatter"><template v-slot="{ row }"><slot :name="itemChild.slot" :row="row" /></template></el-table-column><el-table-columnv-else:prop="itemChild.prop":label="itemChild.label":align="itemChild.align || 'center'":width="itemChild.width":min-width="itemChild.minWidth":fixed="itemChild.fixed":formatter="itemChild.formatter"><template v-if="itemChild.children"><el-table-columnv-for="(itemChildChild, childChildIndex) in itemChild.children":key="childChildIndex":prop="itemChildChild.prop":label="itemChildChild.label":align="itemChildChild.align || 'center'":width="itemChildChild.width":min-width="itemChildChild.minWidth":fixed="itemChildChild.fixed":formatter="itemChildChild.formatter"></el-table-column></template><template v-if="!itemChild.children" v-slot="{ row }">{{ row[itemChild.prop] }}</template></el-table-column></template></template><template v-if="!coumn.children" v-slot="{ row }">{{ row[coumn.prop] }}</template></el-table-column></template></template><!-- 正常表格 --><template v-else><template v-for="(coumn, index) in columnOption" :key="index"><el-table-columnv-if="coumn.slot":show-overflow-tooltip="showTooltip":align="coumn.align || 'center'":key="coumn.label":prop="coumn.prop":label="coumn.label":width="coumn.width":min-width="coumn.minWidth":fixed="coumn.fixed":formatter="coumn.formatter"><template v-slot="{ row }"><slot :name="coumn.slot" :row="row" /></template></el-table-column><el-table-columnv-else:align="coumn.align || 'center'":sortable="coumn.sortable":show-overflow-tooltip="showTooltip":prop="coumn.prop":label="coumn.label":width="coumn.width":min-width="coumn.minWidth":fixed="coumn.fixed":formatter="coumn.formatter"></el-table-column></template></template></el-table><el-paginationv-if="pageData && pageDataShow"background:page-size="pageData.pageSize":total="pageData.total":pager-count="pagerCount":current-page.sync="pageData.pageNo || pageData.pageNum"class="pagination":layout="layout"@current-change="currentChange"@size-change="sizeChange"/>
</template><script>
export default {name: "ScadaTable",props: {stripe: { type: Boolean, default: true },columnOption: { type: Array, default: () => [] }, // 每一列数据tableData: { type: Array, default: () => [] }, // 表格数据border: { type: Boolean, default: false }, // 是否显示列边框index: { type: Boolean, default: false }, // 是否显示排序selection: { type: Boolean, default: false }, // 是否显示多选框pageData: { type: Object, default: () => {} }, // 分页相关数据，有则显示rowKey: { type: String, default: "id" }, // 树表格必须指定keytreeProps: { type: Object, default: () => {} },tree: { type: Boolean, default: false }, // 是否是树表格objectSpanMethod: { type: Function, default: () => {} }, //合并行或列showSummary: { type: Boolean, default: false },summaryMethod: { type: Function, default: () => {} },cellStyle: { type: Function, default: () => {} },formatter: { type: Function, default: () => {} },loading: { type: Boolean, default: false },moreLevel: { type: Boolean, default: false },height: { type: String, default: "auto" },showTooltip: { type: Boolean, default: true },lazy: { type: Boolean, default: false },pageDataShow: { type: Boolean, default: true },layout: { type: String, default: "prev, pager, next, sizes,total" },pagerCount: {type: Number,default: 7,},},emits: ["editCell","rowClick","rowDblclick","currentChange","sizeChange","treeLoad","selectionChange",],setup(props, context) {const indexMethod = (index) => {if (props.pageData) {return (index +1 +((props.pageData.pageNo || props.pageData.pageNum) - 1) *props.pageData.pageSize);} else {return index + 1;}};const handlerRowKey = () => {return (props.tree && props.rowKey) || "";};//给合计的单元格加上文字提示//点击单元格的时候const editCell = (item, column, cell, event) => {context.emit("editCell", item, column, cell, event);};// 点击行的时候const rowClick = (row, column, event) => {context.emit("rowClick", row, column, event);};// 双击行的时候const rowDblclick = (row, column, event) => {context.emit("rowDblclick", row, column, event);};// 改变页数回调const currentChange = (event) => {context.emit("currentChange", event);};// 改变显示个数回调const sizeChange = (event) => {context.emit("sizeChange", event);};// 树加载const treeLoad = (tree, treeNode, resolve) => {context.emit("treeLoad", tree, treeNode, resolve);};// 选中框状态改变const selectionChange = (selection) => {context.emit("selectionChange", selection);};return {indexMethod,handlerRowKey,editCell,rowClick,rowDblclick,currentChange,sizeChange,treeLoad,selectionChange,};},
};
</script><style lang="scss">
.el-loading-spinner {i {color: #00ffff !important;}.el-loading-text {color: #00ffff !important;}
}
</style>

table文件夹下index.js 全部代码：

import Table from './table.vue'export default Table

components文件夹下的index.js全部代码：

import Table from './table'
const components = [Table,
]export default (Vue) => {components.forEach((ele) => Vue.component(ele.name, ele))
}

在main.js文件中代码（设置为组件）：

import Components from "./components";app.use(Components).use(router).use(store).mount("#app");

用法(结构)：

<!--  表格 --><scada-tableselection indexstripe:showSummary="isShow":loading="tableObj.loading"@selectionChange="tableObj.selectionChange":summaryMethod="tableObj.summaryMethod":moreLevel="true":column-option="tableObj.columnOption":table-data="tableObj.tableData" :objectSpanMethod="tableObj.spanMethod":cellStyle="tableObj.cellStyle":pageData="tableObj .pageData"@currentChange="tableObj .currentChange"@sizeChange="tableObj .sizeChange">><template v-slot:caozuo="{ row }"><el-button type="text" @click="tableObj.deleteData(row)">删除</el-button></template></scada-table>

用法（js):

// 表格
const tableObj = reactive({loading:false,columnOption:[],//表头tableData:[],//表格数据delList:[],//批量删除idmergeObj:{},// 合并行的下标mergeArr:[],// 表格中的列名// 分页pageData: {// 表格分页所需数据pageSize: 10,total: 10,pageNum: 1,usePageHelper: true,},currentChange: (event) => {// 分页页数变化resObj.pageData.pageNum = event;resObj.getData();},sizeChange: (event) => {// 分页大小变化resObj.pageData.pageSize = event;resObj.getData();},// 表格合并方法spanMethod:({ row, column, rowIndex, columnIndex })=>{},// 合计方法summaryMethod:(param)=>{// param列数组；data数据const { columns, data } = param},getData:()=>{// 获取表头数据 },// 多选框选中数组selectionChange:(val)=>{tableObj.delList = val.map(item=>{return item.id})},// 判断多选数组是否为空reduceBtn:()=>{if(tableObj.delList.length === 0){return ElMessage.warning({message:"请选择删除的数据",type:"warning"})}tableObj.deleteData()},// 批量单个删除deleteData:(row) => {ElMessageBox.confirm("此操作将删除阅读资料，是否继续？", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {// 执行删除接口});},// 筛选查询submit:()=>{if(dateRange.value.length > 0){form.beginDate = dateRange.value[0]form.endDate = dateRange.value[1]}else{form.beginDate = ""form.endDate =""}resObj.getData()},// 重置reset:()=>{filterForm.value.resetFields();dateRange.value = []form.plateNumber = "";form.beginDate = "";form.endDate = "" ;resObj.getData()},
})