Element封装Table和Pagination

功能

基于Element2.15.7版本，对Table和Pagination封装成新组件TablePage。
使用方式：Json数据格式的配置，代码在下方。
注：vue使用2.x版本，仅供参考学习交流。

效果图

封装table和pagination

<!-- TablePage组件 -->
<template>
  <div style="position:relative">
    <el-table
      ref="table"
      :data="data"
      empty-text="暂无数据"
      :show-header="showHeader"
      :border="border"
      :stripe="strip"
      size="mini"
      :tooltip-effect="tooltipEffect"
      :row-style="rowStyle"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :header-row-style="headerRowStyle"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      @sort-change="handleSortChange"
      @row-click="handleRow"
      @row-dblclick="handleRowDb"
      @cell-click="handleCell"
      @cell-dblclick="handleCellDb"
      @cell-mouse-enter="handleCellMouseEnter"
      @cell-mouse-leave="handleCellMouseLeave"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="columnsType.type != ''" :type="columnsType.type" :label="columnsType.label" :width="columnsType.width" align="center" :selectable="handleSelectable"></el-table-column>
      <el-table-column
        v-for="(item, $index) in columns"
        :key="$index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :min-width="item.minWidth"
        :align="item.align || 'left'"
        :sortable="item.sortable || false"
        :show-overflow-tooltip="item.tooltip == undefined || item.tooltip"
        v-if="item.checked == undefined || item.checked"
      >
        <template slot-scope="scope">
          <span>
            <slot v-if="item.template" :name="item.prop" :row="scope.row" :index="scope.$index"></slot>
            <span v-else>{{ scope.row[item.prop] | isEmpty }}</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-bottom-selection">
      <slot name="selection"></slot>
    </div>
    <div v-if="pagination">
      <span class="bottom-bar-left" v-if="columnsType.type != ''">
        <el-checkbox style="margin: 16px;" v-model="checkAll" :indeterminate="false" @change="handleCheckAllChange">全选</el-checkbox>
      </span>
      <span class="bottom-bar-left">
        <slot name="bottom-bar-left" class="bottom-bar-left"></slot>
      </span>
      <el-pagination
        class="table-page-pagination"
        v-if="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "TablePage",
  data() {
    return {
      checkAll: false,
    };
  },
  computed: {
    pageValue: {
      //getter 方法
      get() {
        return this.pageSize;
      },
      set(newValue) {
        return newValue;
      },
    },
  },
  props: {
    data: {
      //表格数据
      type: Array,
      default: function() {
        return [];
      },
    },
    columns: {
      //表格列
      type: Array,
      default: function() {
        return [];
      },
    },
    columnsType: {
      //对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮
      type: Object,
      default: function() {
        return {
          type: "",
          label: "",
          width: "50",
        };
      },
    },
    layout: {
      type: String,
      default: "sizes, total, prev, pager, next",
    },
    pageSizes: {
      type: Array,
      default: function() {
        return [10, 20, 30, 40];
      },
    },
    total: {
      //总条数
      type: Number,
      default: 10,
    },
    currentPage: {
      //当前页
      type: Number,
      default: 1,
    },
    pageSize: {
      //一页显示多少条
      type: Number,
      default: 10,
    },
    pagination: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    strip: {
      type: Boolean,
      default: false,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    headerCellStyle: {
      type: Function,
      default: function() {
        return {};
      },
    },
    tooltipEffect: {
      type: String,
      default: "light",
    },
    rowStyle: {
      type: Function,
      default: function() {
        return {};
      },
    },
    handleSelectable: {
      type: Function,
      default: function(row, index) {
        if (row.attr == 1) {
          return false;
        }
        return true;
      },
    },
    headerRowStyle: {
      type: Function,
      default: function() {
        return {};
      },
    },
    cellStyle: {
      type: Function,
      default: function() {
        return "";
      },
    },
    pageBottomClass: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    handleCheckAllChange(val) {
      this.$refs["table"].toggleAllSelection();
    },

    handleSizeChange(val) {
      //每一页显示几条数据
      this.$emit("sizeChange", val);
    },
    handleCurrentChange(val) {
      // 当前第几页
      this.$emit("currentChange", val);
    },
    handleSortChange(column) {
      this.$emit("sortChange", column);
    },

    handleSelectionChange(selection) {
      this.$emit("selectionChange", selection);
    },

    handleRow(row, column, event) {
      this.$emit("rowClick", {
        row,
        column,
        event,
      });
    },

    handleRowDb(row, column, event) {
      this.$emit("rowDbClick", {
        row,
        column,
        event,
      });
    },

    handleCell(row, column, cell, event) {
      this.$emit("cellClick", {
        row,
        column,
        cell,
        event,
      });
    },

    handleCellDb(row, column, cell, event) {
      this.$emit("cellDbClick", {
        row,
        column,
        cell,
        event,
      });
    },

    handleCellMouseLeave(row, column, cell, event) {
      this.$emit("cellMouseLeave", {
        row,
        column,
        cell,
        event,
      });
    },

    handleCellMouseEnter(row, column, cell, event) {
      this.$emit("cellMouseEnter", {
        row,
        column,
        cell,
        event,
      });
    },
  },
};
</script>

引入使用

<template>
  <div>
    <table-page
      :data="tableData"
      :columns="columns"
      :columnsType="columnsType"
      :currentPage="currentPage"
      :pageSize="pageSize"
      :total="total"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @selectionChange="handleSelection"
    >
      <template prop="sex" slot="sex" slot-scope="scoped">
        <span>{{ scoped.row.sex | textBySex }}</span>
      </template>

      <template prop="operation" slot="operation" slot-scope="scoped">
        <el-button type="text" size="small" @click="handleClick">编辑</el-button>
        <el-button type="text" size="small" @click="handleDel">删除</el-button>
      </template>
    </table-page>
  </div>
</template>

<script>
import TablePage from "@/components/table-page";
export default {
  name: "Index",
  components: { TablePage },
  filters: {
    textBySex(value) {
      return value == 1 ? "男" : "女";
    },
  },
  data() {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      columnsType: {
        type: "selection",
      },
      columns: [
        {
          prop: "name",
          label: "名称",
        },

        {
          prop: "age",
          label: "年龄",
        },

        {
          prop: "sex",
          label: "性别",
          template: true,
        },
        {
          prop: "operation",
          label: "操作",
          width: 110,
          template: true,
        },
      ],
    };
  },
  methods: {
    handleSelection(selects){
      console.log(selects);
    },
    handleSelectChange() {
      this.page = 1;
      this.getList();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    },
    handleSizeChange(size) {
      this.currentPage = 1;
      this.pageSize = size;
      this.getList();
    },
    handleClick() {
      this.$message.info("编辑");
    },

    handleDel() {
      this.$message.info("删除");
    },

    getList() {
      let tables = [];
      for (let index = 0; index < 10; index++) {
        const element = {
          id: index,
          name: "姓名" + index,
          sex: Math.random() < 0.5 ? 0 : 1,
          age: Math.floor(Math.random() * 10) + "岁",
        };
        tables.push(element);
      }
      this.tableData = [].concat(this.tableData, tables);
      this.total = this.tableData.length;
    },
  },
  created() {
    this.getList();
  },
};
</script>