基于element-ui表格二次封装

之前有基于element-ui表格单独的而封装表格，

1. elementUI版本 "element-ui": "^2.15.0" （element官网）
2. 本次封装移植了elementUI上的所有方法，只需要通过columns去配置即可
3. 本次二次封装中集成了，表格分页，前端下载（支持下载当前页和指定数据量数据），表格列筛选功能
4. 使用时注意文件路径。
5. 文章结尾会有使用示例
6. 使用插件 "xlsx": "^0.16.9";"file-saver": "^2.0.5"用于文件下载

主要封装tables文件

tables.vue

<template>
  <!--表格默认开启悬浮提示，及文字剧中-->
  <div class="data-table-box-">
    <el-table
      ref="tableDataRef"
      :data="tableData"
      style="width: 100%;border-radius:4px;padding:0 20px 20px"
      :height="height"
      v-loading="loadingTb"
      :max-height="maxHeight"
      :stripe="stripe"
      :border="border"
      :size="size"
      :fit="fit"
      :show-header="showHeader"
      :highlight-current-row="highlightCurrentRow"
      :current-row-key="currentRowKey"
      :row-class-name="rowClassName"
      :row-style="rowStyle"
      :cell-class-name="cellClassName"
      :cell-style="cellStyle"
      :header-row-class-name="headerRowClassName"
      :header-row-style="headerRowStyle"
      :header-cell-class-name="headerCellClassName"
      :header-cell-style="headerCellStyle"
      :row-key="rowKey"
      :empty-text="emptyText"
      :expand-row-keys="expandRowKeys"
      :default-sort="defaultSort"
      :tooltip-effect="tooltipEffect"
      :show-summary="showSummary"
      :sum-text="sumText"
      :summary-method="summaryMethod"
      :span-method="spanMethod"
      :select-on-indeterminate="selectOnIndeterminate"
      :indent="indent"
      :lazy="lazy"
      :load="load"
      :tree-props="treeProps"
      @select="onSelect"
      @select-all="onSelectAll"
      @selection-change="onSelectionChange"
      @cell-mouse-enter="onCellMouseEnter"
      @cell-mouse-leave="onCellMouseLeave"
      @cell-click="onCellClick"
      @cell-dblclick="onCellDblclick"
      @row-click="onRowClick"
      @row-contextmenu="onRowContextmenu"
      @row-dblclick="onRowDblclick"
      @header-click="onHeaderClick"
      @header-contextmenu="onHeaderContextmenu"
      @sort-change="onSortChange"
      @filter-change="onFilterChange"
      @current-change="onCurrentChange"
      @header-dragend="onHeaderDragend"
      @expand-change="onExpandChange"
    >
      <template v-for="(col, index) in insideColumns">
        <!-- 操作列/自定义列 -->
        <slot v-if="col.slot" :name="col.prop"></slot>
        <!-- 普通列 -->
        <el-table-column
          v-else
          :key="index"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :formatter="col.formatter"
          :type="col.type"
          :index="col.index"
          :column-key="col.columnKey"
          :min-width="col.minWidth"
          :fixed="col.fixed"
          :render-header="col.renderHeader"
          :sortable="col.sortable"
          :sort-method="col.sortMethod"
          :sort-by="col.sortBy"
          :sort-orders="col.sortOrders"
          :resizable="col.resizable"
          :show-overflow-tooltip="col.showOverflowTooltip"
          :align="col.align"
          :header-align="col.headerAlign"
          :class-name="col.className"
          :label-class-name="col.labelClassName"
          :selectable="col.selectable"
          :reserve-selection="col.reserveSelection"
          :filters="col.filters"
          :filter-placement="col.filterPlacement"
          :filter-multiple="col.filterMultiple"
          :filtered-value="col.filteredValue"
        >
          <template slot-scope="scope">
            <!--            render渲染-->
            <exSlot
              v-if="col.render"
              :column="col"
              :row="scope.row"
              :render="col.render"
              :index="index"
            ></exSlot>
            <!--            直接渲染-->
            <span v-else>{{ scope.row[col.prop] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="jb-table-footer-">
      <el-row>
        <el-col :span="21" v-if="showPage">
          <el-pagination
            background
            :layout="layout"
            :page-size="pageSizeTb"
            :total="totalTb"
            :page-sizes="pageSizes"
            :current-page="pageTb"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-col>
        <el-col :offset="showPage ? 0 : 20" :span="1" v-if="selectColumns">
          <el-dropdown trigger="click" placement="top" :hide-on-click="false">
            <el-button type="primary">
              筛选
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-row
                style="border-bottom: solid 1px #C0C4CC;margin-bottom: 10px;padding-bottom: 10px"
              >
                <el-col :span="20" :offset="4">列筛选</el-col>
              </el-row>
              <el-checkbox-group
                v-model="tableColumnsChecked"
                @change="tableColumns"
              >
                <el-dropdown-item v-for="(col, index) in columns" :key="index">
                  <el-checkbox
                    v-if="col.label && !col.slot"
                    :label="col.prop"
                    >{{ col.label }}</el-checkbox
                  >
                </el-dropdown-item>
              </el-checkbox-group>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="2" v-if="exportExcel">
          <el-dropdown trigger="click" placement="top" :hide-on-click="false">
            <el-button type="primary">
              导出
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="primary" @click="exprotAll" v-click-disabled
                  >全 量 导 出</el-button
                >
              </el-dropdown-item>
              <el-row
                style="border-bottom: solid 1px #C0C4CC;margin-bottom: 10px;padding-bottom: 10px"
              >
              </el-row>
              <el-dropdown-item>
                <el-button type="primary" @click="exportPage" v-click-disabled
                  >导出当前页</el-button
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { deepCopy } from "@/utils/utils";
var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    };
    if (data.props.column) params.column = data.props.column;
    return data.props.render(h, params);
  }
};
export default {
  name: "tables-test",
  components: { exSlot },
  data() {
    return {
      tableColumnsChecked: [],
      insideColumns: [],
      loadingTb: false,
      tableData: [],
      pageSizeTb: 10,
      pageTb: 1,
      totalTb: 0
    };
  },
  props: {
    maxHeight: {
      type: String || Number
    },
    stripe: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: "medium" //medium / small / mini
    },
    fit: {
      type: Boolean,
      default: true
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false
    },
    currentRowKey: {
      type: [String, Number]
    },
    rowClassName: {
      type: [Function, String]
    },
    rowStyle: {
      type: [Function, Object]
    },
    cellClassName: {
      type: [Function, String]
    },
    cellStyle: {
      type: [Function, Object]
    },
    headerRowClassName: {
      type: [Function, String]
    },
    headerRowStyle: {
      type: [Function, Object]
    },
    headerCellClassName: {
      type: [Function, String]
    },
    headerCellStyle: {
      type: [Object, Function],
      default() {
        return {
          background: "#f2f2f2",
          fontWeight: "400",
          color: "#555555"
        };
      }
    },
    rowKey: {
      type: [Function, String]
    },
    expandRowKeys: {
      type: [Function, String]
    },
    emptyText: {
      type: String,
      default: ""
    },
    defaultSort: {
      type: Object,
      default() {
        return {};
      }
    },
    tooltipEffect: {
      type: String,
      default: ""
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    sumText: {
      type: String,
      default: ""
    },
    summaryMethod: {
      type: Function
    },
    spanMethod: {
      type: Function
    },
    selectOnIndeterminate: {
      type: Boolean,
      default: true
    },
    indent: {
      type: Number,
      default: 16
    },
    lazy: {
      type: Boolean
    },
    load: {
      type: Function
    },
    treeProps: {
      type: Object,
      default() {
        return {
          hasChildren: "hasChildren",
          children: "children"
        };
      }
    },
    resTableData: {
      type: Array,
      default() {
        return [];
      }
    },

    height: {
      type: String,
      default: "620px"
    },
    loading: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    axiosData: {
      type: Object,
      default() {
        return {};
      }
    },
    axiosUrl: {
      type: String,
      default: ""
    },
    axiosMethod: {
      type: String,
      default: "post"
    },

    showPage: {
      // 是否显示页码
      type: Boolean,
      default: true
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 30, 50, 100];
      }
    },
    layout: {
      type: String,
      default: "total,  prev, pager, next, sizes, jumper"
    },
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    page: {
      type: Number,
      default: 1
    },
    exportExcel: {
      //是否显示导出按钮
      type: Boolean,
      default: true
    },
    exportExcelTitle: {
      type: String,
      default: "张家口涉奥保电"
    },
    selectColumns: {
      //是否显示列筛选
      type: Boolean,
      default: true
    },
  },
  created() {
    this.tableColumnsChecked = this.getHead(this.columns);
    this.tableColumns();
  },
  methods: {
    outSideQuery() {
      this.tableData = deepCopy(this.resTableData);
      this.totalTb = this.total;
      this.pageSizeTb = this.pageSize;
      this.pageTb = this.page;
    },
    queryData(page, pageSize) {
      let queryData = deepCopy(this.axiosData);
      queryData["page"] = page || this.pageTb;
      queryData["pageSize"] = pageSize || this.pageSizeTb;
      this.loadingTb = true;
      request({
        url: this.axiosUrl,
        method: this.axiosMethod,
        data: queryData
      })
        .then(res => {
          this.loadingTb = false;
          this.tableData = res.data.list;
          this.totalTb = res.data.total;
          this.pageSizeTb = res.data.pageSize;
          this.pageTb = res.data.page;
        })
        .catch(() => {
          this.loadingTb = false;
        });
    },
    handleSizeChange(val) {
      this.pageSizeTb = val;
      this.$emit("handleSizeChange", this.pageSizeTb);
      this.queryData(this.pageTb, this.pageSizeTb);
    },
    handleCurrentChange(val) {
      this.pageTb = val;
      this.$emit("handleCurrentChange", this.pageTb);
      this.queryData(this.pageTb, this.pageSizeTb);
    },
    tableColumns() {
      let columns = this.columns;
      this.insideColumns = [];
      columns.forEach(col => {
        if (col.slot) {
          this.insideColumns.push(col);
        }
        this.tableColumnsChecked.forEach(che => {
          // 默认居中
          if (!col.align) {
            col.align = "center";
          }
          // 超出悬浮提示
          if (!col.showOverflowTooltip) {
            col.showOverflowTooltip = true;
          }
          if (che === col.prop) {
            this.insideColumns.push(col);
          }
        });
      });
      // 表格错位
      this.$nextTick(() => {
        this.$refs.tableDataRef.doLayout();
      });
    },
    getHead(item) {
      let tmp = [];
      item.forEach(it => {
        if (it.show !== false && !it.slot) {
          tmp.push(it.prop);
        }
      });
      return tmp;
    },
    getExporthead(data) {
      let head = {};
      let headTitle = [];
      let headKey = [];
      data.forEach(item => {
        if (item.label && item.prop) {
          headKey.push(item.prop);
          headTitle.push(item.label);
        }
      });
      head.headKey = headKey;
      head.headTitle = headTitle;
      return head;
    },
    exprotAll() {
      this.loadingTb = true;
      let queryData = deepCopy(this.axiosData);
      queryData["page"] = 1;
      queryData["pageSize"] = 20000; //下载指定条数数据（全量下载）
      request({
        url: this.axiosUrl,
        method: this.axiosMethod,
        data: queryData
      })
        .then(res => {
          this.loadingTb = false;
          this.exprotExcel(res.data.list);
        })
        .catch(() => {
          this.loadingTb = false;
        });
    },
    exportPage() {
      this.exprotExcel(this.tableData);
    },
    exprotExcel(d) {
      import("@/libs/Export2Excel").then(excel => {
        const tHeader = this.getExporthead(this.columns).headTitle;
        const filterVal = this.getExporthead(this.columns).headKey;
        const data = this.formatJson(filterVal, d);
        const title =
          this.exportExcelTitle
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: title,
          autoWidth:true,
          bookType: "xlsx"
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            // return parseTime(v[j])
          } else {
            return v[j];
          }
        })
      );
    },
    onSelect(selection, row) {
      this.$emit("select", selection, row);
    },
    onSelectAll(selection) {
      this.$emit("select-all", selection);
    },
    onSelectionChange(selection) {
      this.$emit("selection-change", selection);
    },
    onCellMouseEnter(row, column, cell, event) {
      this.$emit("cell-mouse-enter", row, column, cell, event);
    },
    onCellMouseLeave(row, column, cell, event) {
      this.$emit("cell-mouse-leave", row, column, cell, event);
    },
    onCellClick(row, column, cell, event) {
      this.$emit("cell-click", row, column, cell, event);
    },
    onCellDblclick(row, column, cell, event) {
      this.$emit("cell-dblclick", row, column, cell, event);
    },
    onRowClick(row, column, event) {
      this.$emit("row-click", row, column, event);
    },
    onRowContextmenu(row, column, event) {
      this.$emit("row-contextmenu", row, column, event);
    },
    onRowDblclick(row, column, event) {
      this.$emit("row-dblclick", row, column, event);
    },
    onHeaderClick(column, event) {
      this.$emit("header-click", column, event);
    },
    onHeaderContextmenu(column, event) {
      this.$emit("header-contextmenu", column, event);
    },
    onSortChange({ column, prop, order }) {
      this.$emit("sort-change", { column, prop, order });
    },
    onFilterChange(filters) {
      this.$emit("filter-change", filters);
    },
    onCurrentChange(currentRow, oldCurrentRow) {
      this.$emit("current-change", currentRow, oldCurrentRow);
    },
    onHeaderDragend(newWidth, oldWidth, column, event) {
      this.$emit("header-dragend", newWidth, oldWidth, column, event);
    },
    onExpandChange(row, expand) {
      this.$emit("expand-change", row, expand);
    }
  },
  watch: {
    loading(newV) {
      this.loadingTb = newV;
    },
    resTableData: {
      handler(newVal) {
        this.tableData = deepCopy(newVal);
      },
      deep: true
    }
  }
};
</script>
<style scoped lang="scss">
.data-table-box- {
  box-shadow: 0 3px 11px rgba(27, 95, 230, 0.149019607843137);
  border-radius: $--border-radius;
}
.jb-table-footer- {
  background-color: #fff;
  width: calc(100% - 10px);
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  border-bottom-left-radius: $--border-radius;
  border-bottom-right-radius: $--border-radius;
}
</style>

excel前端导出文件

excel表格下载封装使用 支持列/行合并 宽度自适应…(本js封装来源网络，具体使用请异步)

src/libs/Export2Excel.js

/* eslint-disable */
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'

function generateArray(table) {
    var out = [];
    var rows = table.querySelectorAll('tr');
    var ranges = [];
    for (var R = 0; R < rows.length; ++R) {
        var outRow = [];
        var row = rows[R];
        var columns = row.querySelectorAll('td');
        for (var C = 0; C < columns.length; ++C) {
            var cell = columns[C];
            var colspan = cell.getAttribute('colspan');
            var rowspan = cell.getAttribute('rowspan');
            var cellValue = cell.innerText;
            if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

            //Skip ranges
            ranges.forEach(function (range) {
                if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
                    for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
                }
            });

            //Handle Row Span
            if (rowspan || colspan) {
                rowspan = rowspan || 1;
                colspan = colspan || 1;
                ranges.push({
                    s: {
                        r: R,
                        c: outRow.length
                    },
                    e: {
                        r: R + rowspan - 1,
                        c: outRow.length + colspan - 1
                    }
                });
            };

            //Handle Value
            outRow.push(cellValue !== "" ? cellValue : null);

            //Handle Colspan
            if (colspan)
                for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
        }
        out.push(outRow);
    }
    return [out, ranges];
};

function datenum(v, date1904) {
    if (date1904) v += 1462;
    var epoch = Date.parse(v);
    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
    var ws = {};
    var range = {
        s: {
            c: 10000000,
            r: 10000000
        },
        e: {
            c: 0,
            r: 0
        }
    };
    for (var R = 0; R != data.length; ++R) {
        for (var C = 0; C != data[R].length; ++C) {
            if (range.s.r > R) range.s.r = R;
            if (range.s.c > C) range.s.c = C;
            if (range.e.r < R) range.e.r = R;
            if (range.e.c < C) range.e.c = C;
            var cell = {
                v: data[R][C]
            };
            if (cell.v == null) continue;
            var cell_ref = XLSX.utils.encode_cell({
                c: C,
                r: R
            });

            if (typeof cell.v === 'number') cell.t = 'n';
            else if (typeof cell.v === 'boolean') cell.t = 'b';
            else if (cell.v instanceof Date) {
                cell.t = 'n';
                cell.z = XLSX.SSF._table[14];
                cell.v = datenum(cell.v);
            } else cell.t = 's';

            ws[cell_ref] = cell;
        }
    }
    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
    return ws;
}

function Workbook() {
    if (!(this instanceof Workbook)) return new Workbook();
    this.SheetNames = [];
    this.Sheets = {};
}

function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

export function export_table_to_excel(id) {
    var theTable = document.getElementById(id);
    var oo = generateArray(theTable);
    var ranges = oo[1];

    /* original data */
    var data = oo[0];
    var ws_name = "SheetJS";

    var wb = new Workbook(),
        ws = sheet_from_array_of_arrays(data);

    /* add ranges to worksheet */
    // ws['!cols'] = ['apple', 'banan'];
    ws['!merges'] = ranges;

    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary'
    });

    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), "test.xlsx")
}

export function export_json_to_excel({
                                         multiHeader = [],
                                         header,
                                         data,
                                         filename,
                                         merges = [],
                                         autoWidth = true,
                                         bookType = 'xlsx'
                                     } = {}) {
    /* original data */
    filename = filename || 'excel-list'
    data = [...data]
    data.unshift(header);

    for (let i = multiHeader.length - 1; i > -1; i--) {
        data.unshift(multiHeader[i])
    }

    var ws_name = "SheetJS";
    var wb = new Workbook(),
        ws = sheet_from_array_of_arrays(data);

    if (merges.length > 0) {
        if (!ws['!merges']) ws['!merges'] = [];
        merges.forEach(item => {
            ws['!merges'].push(XLSX.utils.decode_range(item))
        })
    }

    if (autoWidth) {
        /*设置worksheet每列的最大宽度*/
        const colWidth = data.map(row => row.map(val => {
            /*先判断是否为null/undefined*/
            if (val == null) {
                return {
                    'wch': 10
                };
            }
            /*再判断是否为中文*/
            else if (val.toString().charCodeAt(0) > 255) {
                return {
                    'wch': val.toString().length * 2
                };
            } else {
                return {
                    'wch': val.toString().length
                };
            }
        }))
        /*以第一行为初始值*/
        let result = colWidth[0];
        for (let i = 1; i < colWidth.length; i++) {
            for (let j = 0; j < colWidth[i].length; j++) {
                if (result[j]['wch'] < colWidth[i][j]['wch']) {
                    result[j]['wch'] = colWidth[i][j]['wch'];
                }
            }
        }
        ws['!cols'] = result;
    }

    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {
        bookType: bookType,
        bookSST: false,
        type: 'binary'
    });
    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), `${filename}.${bookType}`);
}

对象深拷贝

/utils/utils

/**
 * 对象深拷贝
 * @param obj
 */
export const deepCopy = obj => {
  let result = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    // eslint-disable-next-line no-prototype-builtins
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === "object") {
        result[key] = deepCopy(obj[key]); // 递归复制
      } else {
        result[key] = obj[key];
      }
    }
  }
  return result;
};

请求方式

/utils/request

import axios from "axios";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken } from "@/utils/auth";
import { Base64 } from "js-base64";
import con from "@/config/index";
// create an axios instance
let base;
if (process.env.VUE_APP_MODE === "development") {
  base = con.dev;
} else {
  base = con.pro;
}
console.log('base=====>',base);
const service = axios.create({
  baseURL: base, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: con.timeout * 1000, // request timeout
  headers:{
    'Content-Type': 'application/json'
  }
});

// request interceptor
service.interceptors.request.use(
  config => {
    config.headers["Authorization"] = `Basic ${Base64.encode(
      `${con.clientId}:${con.clientSecret}`
    )}`;
    if (getToken()) {
      config.headers["Blade-Auth"] = "bearer " + getToken(); // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
    }
    return config;
  },
  error => {
    // do something with request error
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data;

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200) {
      Message({
        message: res.message || "Error",
        type: "error",
        duration: 5 * 1000
      });

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 500) {
        // to re-login
        MessageBox.confirm(
          "You have been logged out, you can cancel to stay on this page, or log in again",
          "Confirm logout",
          {
            confirmButtonText: "Re-Login",
            cancelButtonText: "Cancel",
            type: "warning"
          }
        ).then(() => {
          store.dispatch("user/resetToken").then(() => {
            location.reload();
          });
        });
      }
      return Promise.reject(new Error(res.message || "Error"));
    } else {
      return res;
    }
  },
  error => {
    console.log("err" + error); // for debug
    Message({
      message: error.message,
      type: "error",
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

export default service;

使用方式

1、传入url表格组件自动处理请求数据

<template>
  <my-tables
      ref="tablesRef"
      :axios-outside="false"
      :axios-data="axiosData"
      :axios-url="axiosUrl"
      :columns="columns"
  >
    <el-table-column
        slot="operation"
        label="操作"
        align="center"
        fixed="right"
    >
      <template slot-scope="scope">
        <div class="operation">
          <a class="pointer" @click="find(scope.row)">查看</a>
          <a class="pointer" style="margin: 0 14px" @click="edit(scope.row)"
          >编辑</a
          >
          <a class="pointer" @click="del(scope.row)">删除</a>
        </div>
      </template>
    </el-table-column>
  </my-tables>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: "55"
        },
        {
          label: "供电单位",
          prop: "orgName"
        },
        {
          label: "所属变电站",
          prop: "subsName"
        },
        {
          label: "所属线路",
          prop: "lineName"
        },
        {
          label: "台区名称",
          prop: "tgName",
          width: "200px"
        },
        {
          label: "台区编号",
          prop: "tgNo"
        },
        {
          label: "用户名称",
          prop: "consName"
        },
        {
          label: "用户编号",
          prop: "consNo"
        },
        {
          label: "保电时间",
          prop: "sDate",
          width: "200px"
        },
        {
          label: "保电原因",
          prop: "signboard"
        },
        {
          label: "操作",
          slot: "operation",
          prop: "operation"
        }
      ],
      axiosData: {},
      axiosUrl: "",
    },
  methods: {
    query() {
      this.axiosUrl = "api/system/articleList";
      this.$nextTick(() => {
        this.$refs.tablesRef.queryData();
      });
    },
  }
}

2、数据在外部请求

1. 主要通过传递请求数据，resTableData
2. 总条数total，
   当前页条数pageSize
   第几页 page
3. 调用 this.$refs.tablesRef.outSideQuery();
4. 获取组件第几页详情见elementUi官网