对 el-table 进行二次封装

<template>
  <div class="swdTable">
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData1"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{
          'background-color': '#fafafa'
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" v-if="table.select"></el-table-column>
        <!-- 
           type                selection/index/expand 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮
           fixed               列是否固定在左侧或者右侧，true 表示固定在左侧
           prop                对应列内容的字段名，也可以使用 property 属性
           label               显示的标题
           min-width           对应列的最小宽度
           sortable            对应列是否可以排序
           formatter           格式化内容
           show-overflow-tooltip    当内容过长被隐藏时显示 tooltip
           align                   对齐方式     
        -->
        <el-table-column label="序号" width="60" type="index" align="center" v-if="table.type"></el-table-column>
        <el-table-column
          v-for="(col, index) in tableLabel"
          :fixed="col.fixed"
          :label="col.title"
          :width="col.width"
          :sortable="col.sort"
          :formatter="col.formatter"
          :show-overflow-tooltip="col.ellipsis"
          :align="col.align"
          :key="index"
          align="left"
        >
          <template slot-scope="scope">
            <slot v-if="col.slot" :name="col.prop" :row="scope.row" />
            <span v-else>{{ scope.row[col.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="right" width="14">
          <template slot="header" slot-scope="scope">
            <div class="more" v-if="more" @click="goMore"></div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page" v-if="total > 0">
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :layout="layout"
          prev-text="上一页"
          next-text="下一页"
          :total="total"
          :hide-on-single-page="false"
          :page-size="pageSize"
          small
        >
          <input class="handlePage" v-model="currentPage1" />
          <div class="handlePage1" @click="handleCurrentChange(currentPage1)">前往</div>
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    table: {
      type: Object,
    },
    tableLabel: {
      type: Array,
    },
    tableData: {
      type: Array,
    },
    total: {
      type: Number,
    },
    pageSize: {
      type: Number,
      default: 15,
    },
    maxHeight: {
      type: String,
      default: null,
    },
    more: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      tableData1: [],
      currentPage: 1,
      currentPage1: 1,
      isShow: true,
      tableLabel1: [],
      layout: "prev,slot,next",
    };
  },
  watch: {
    tableData: {
      //监听数据变化
      handler(newVal, oldVal) {
        this.tableData1 = this.tableData;
      },
      deep: true,
    },
    total(newValue, oldValue) {
      this.total = newValue;
    },
    tableLabel: {
      //监听数据变化
      handler(newVal, oldVal) {
        console.log("val监听", newVal, oldVal);
      },
      deep: true,
    },
    table: {
      handler(newVal, oldVal) {
        this.table = newVal;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    var that = this;
    setTimeout(() => {
      that.tableData1 = that.tableData;
      //that.tableLabel1 =  that.tableLabel;
    }, 0);
    console.log("1111", this.total);
  },
  methods: {
    handleSelectionChange(val) {
      console.log('这是什么页数？',val)
      this.$emit("handleSelectionChange", {
        multipleSelection: val,
      });
    },
    handleSizeChange(val) {
      console.log("222222", val);
    },
    handleCurrentChange(val) {
      console.log("-------", val, this.currentPage);
      this.currentPage1 = val;
      this.currentPage = val*1
      this.$emit("handleCurrentChange", {
        multipleSelection: val,
      });
    },
    goPage(val) {
      console.log("11111", val);
      if (this.currentPage1) {
        this.currentPage = this.currentPage1 * 1;
        this.$emit("goCurrentPage", {
          multipleSelection: this.currentPage1 * 1,
        });
      }
    },
    //点击更多
    goMore() {
      this.$emit("more");
    },
    goMouserOver(type) {
      if (type == true) {
        //this.isShow = true;
      }
    },
    goMouserOut(type) {
      if (type == true) {
        //this.isShow = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.swdTable {
  width: 100%;
  /deep/.table {
    width: 100%;
    position: relative;
    .el-table th > .cell:last-child {
      padding-right: 0px;
    }
    .more {
      width: 14px;
      height: 14px;
      background: brown;
    }
    .el-table__empty-block {
      min-height: 42px;
    }
    .el-table__empty-block .el-table__empty-text {
      height: 42px;
      line-height: 42px;
      padding: 0 !important;
    }
    .cell span {
      font-size: 12px;
    }
    tr {
      .cell {
        div {
          font-size: 12px;
        }
      }
    }
    th {
      padding: 0 !important;
      height: 55px;
      line-height: 55px;
      .cell {
        font-size: 12px;
      }
    }
    td {
      padding: 0 !important;
      height: 55px;
      line-height: 55px;
      cursor: pointer;
    }
  }
}
.page {
  margin-top: 20px;
  width: 100%;
  height: 35px;
  position: relative;
  .pagination {
    position: absolute;
    right: 0%;
    top: 50%;
    transform: translate(0%, -50%);
    .el-pagination {
      display: flex;
      align-items: center;
    }
    /deep/.handlePage {
      display: inline-block;
      line-height: 18px;
      margin: 0 10px;
      width: 30px;
      text-align: center;
      // background: #f0f0f0;
      // position: absolute;
      // right: -162px;
      // top: 0;
      .handlePage_l,
      .handlePage_r {
        font-size: 12px;
        color: #303133;
        line-height: 28px;
        margin: 0 10px;
      }
      .shuru {
        font-size: 12px;
        color: #303133;
        line-height: 28px;

        .el-input__inner {
          width: 48px;
          height: 28px;
          padding: 0 2px;
        }
      }
      .button {
        line-height: 26px;
        width: 40px;
        height: 26px;
        border: 1px solid #dedede;
        border-radius: 2px;
        text-align: center;
        font-size: 12px;
      }
    }
    /deep/.handlePage1 {
      font-size: 12px;
      display: inline-block;
      margin-right: 10px;
      width: 30px;
      text-align: center;
      background-color: #fff;
      cursor: pointer;
      height: 22px;
      line-height: 22px;
    }
  }
}
.putAway {
  width: 14px;
  height: 14px;
  background: rgba(103, 194, 58, 1);
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}
.soldOut {
  width: 14px;
  height: 14px;
  background: rgba(147, 147, 147, 1);
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}
</style>
<style>
.swd_popUp {
  min-width: 40px !important;
  width: 46px !important;
  height: 22px !important;
  line-height: 22px !important;
  font-size: 12px !important;
  color: #999 !important;
  padding: 0 !important;
  text-align: center !important;
  background: #fff;
  /* left:1716px !important; */
}
</style>

                                                           欢迎交流讨论