基于element-Ui table二次封装表格

基于element-Ui 2.15.0 table二次封装表格

最近项目中很多页面都用到了表格，element官网上的使用方法在项目中使用，
会让html结构略显繁琐，以及之前在iview表格的使用上带来的灵感，
基于此目的自己对表格进行了二次封装。
不足之处还望各位多家指正，
element table上所有方法、事件、属性均已移植过来，
使用方式完全是参数配置性，
需要带有前端下载功能，分页组件请移步本链接

<template>
    <el-table
      ref="tableDataRef"
      :data="resTableData"
      :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">
            <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>
</template>

<script>
import request from "@/utils/request";
import { deepCopy } from "@/utils/utils";
import config from "@/config/index";
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 {
      insideColumns: [],
      loadingTb: false,
      tableData: [],
      pageSizeTb: config.pageSizeConfig,
      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
    },
    headerShow: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
  },
  created() {
    this.tableColumns();
  },
  methods: {
    tableColumns() {
      let columns = this.columns;
      this.insideColumns = [];
      columns.forEach(col => {
          // 默认居中
          if (!col.align) {
            col.align = "center";
          }
          //默认显示文字提示
          if (!col.showOverflowTooltip) {
            col.showOverflowTooltip = true;
          }
            this.insideColumns.push(col);
      });
      // 表格错位
      this.$nextTick(() => {
        this.$refs.tableDataRef.doLayout();
      });
    },
    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;
    }
  }
};
</script>
<style scoped lang="scss">
</style>

使用方式

<template>
     <my-tables
        ref="tablesRef"
        :axios-outside="false"
        :res-table-data="tableData"
        :axios-url="axiosUrl"
        :columns="columns"
        height="580px"
        table-title="停复电数据统计-表格"
      >
        <el-table-column
            slot="voltageCurve"
            label="分析"
            align="center"
            width="100px"
        >
          <template slot-scope="scope">
            <span class="pointer underline-text-099" @click="showPopup(scope.row)"
            >电流曲线</span
            >
          </template>
        </el-table-column>
      </my-tables>


</template>

<script>
export default {
  name: "",
  data() {
    return {

      columns: [
        {
          slot: "voltageCurve",
          prop: "voltageCurve"
        },
        {
          label: "供电单位",
          prop: "orgName"
        },
        {
          label: "台区名称",
          prop: "tgName"
        },
        {
          label: "台区编号",
          prop: "tgNo"
        },
        {
          label: "用户名称",
          prop: "consName"
        },
        {
          label: "用户编号",
          prop: "consNo"
        },
        {
          label: "停电次数",
          prop: "offCnt",
          render: (h, params) => {
            return h(
                "a",
                {
                  class: 'pointer underline-text-099',
                  style: {
                    color: "#009999"
                  },
                  on: {
                    click: () => {
                      this.junpClick(params.row)
                    }
                  }
                },
                params.row.offCnt
            );
          }
        },
        {
          label: "统计日期",
          prop: "statDate"
        }
      ]
    }
  },
}