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-column
      v-if="selection"
      type="selection"
      width="55"
      align="center"
    />
    <el-table-column
      v-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-column
          v-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-column
              v-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-column
          v-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">
            <template
              v-for="(itemChild, childIndex) in coumn.children"
              :key="childIndex"
            >
              <el-table-column
                v-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-column
                v-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-column
                    v-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-column
          v-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-column
          v-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-pagination
    v-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" }, // 树表格必须指定key
    treeProps: { 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-table
      selection 
      index
      stripe
      :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:[],//批量删除id
  mergeObj:{},// 合并行的下标
  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()
  },
})