封装el-table

<template>
  <div class="table-container">
    <hktTableHeader ref="hktTableHeader" :header.sync="headerList" :border.sync="border" :stripe.sync="stripe" :size.sync="comSize" :top="2" @refresh="getData()"></hktTableHeader>
    <el-table v-loading="loading" :data="tableData" ref="tableRefs" :selectedData="selectedData" :height="inTableHeight" :border="border" :stripe="stripe" :size="comSize" @select="handleSelect" @select-all="handleSelectAll" @selection-change="handleSelectionChange">
      <el-table-column v-if="ShowSelected" type="selection" fixed="left" width="55" align="center" :selectable="selectInit" />
      <el-table-column v-if="ShowIndex" label="序号" type="index" :index="getIndex" align="center" width="50" fixed="left" />
      <el-table-column v-for="item in headerList" :key="item.label + new Date().getTime()" :type="item.type" :prop="item.prop" :label="item.label" :fixed="item.fixed" :column-key="item.columnKey" :width="item.width" :sortable="item.sortable" :min-width="item.minWidth" :show-overflow-tooltip="item.showTooltip" align="center">
        <template slot-scope="scope">
          <Custom v-if="item.render" :render="item.render" :row="scope.row" :index="scope.$index"></Custom>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="showPagination" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="pageSizes" :page-size="size" :total="total" class="pagination-margin" />
  </div>
</template>

<script>
// import createService from '@/plugin/axios.js'
import { number } from 'echarts'
import Custom from './renderTable.vue'

export default {
  name: 'CommonTable',
  components: {
    Custom,
  },
  props: {
    height: {
      type: [String, Number],
      default: null,
    },
    ShowIndex: {
      type: Boolean,
      default: true,
    },
    ShowSelected: {
      type: Boolean,
      default: false,
    },
    tableHeaders: {
      // 表头
      type: Array,
      default: () => [],
    },
    dataReadUrl: {
      //请求地址
      type: [String],
      default: '',
    },
    autoLoadData: {
      //是否自动加载
      type: Boolean,
      default: true,
    },
    requestMethod: {
      //请求加载
      type: String,
      default: 'post',
    },
    filterParams: {
      //请求数据参数
      type: Object,
      default: () => {},
    },
    isShowSummary: {
      type: Boolean,
      default: false,
    },
    showPagination: {
      //是否显示分页
      type: Boolean,
      default: true,
    },
    // current: {
    //   //当前页数
    //   type: [String, Number],
    //   default: 1,
    // },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 50],
    },
    tableArray: {
      type: Array,
      default: () => [],
    },
    selectedData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tableData: [],
      total: 0,
      size: 20,
      currentPage: 1,
      multipleSelection: [],
      loading: false,
      //公共设置
      border: true,
      stripe: true,
      comSize: 'medium',
      headerList: [],
      inTableHeight: null,
    }
  },
  created() {
    if (this.autoLoadData) {
      this.currentPage = 1
      this.getData()
    }
    //该阶段可以接收父组件的传递参数
    this.inTableHeight = this.height
  },
  mounted() {
    this.$nextTick(() => {
      //表格高度自适应浏览器大小
      this.changeTableHight()
      if (!this.height) {
        window.onresize = () => {
          this.changeTableHight()
        }
      }
    })
  },
  destroyed() {
    //高度自适应事件注销
    window.onresize = null
  },
  methods: {
    updateTable(arr) {
      //其他方式的更新
      this.tableData = arr
    },
    /**
     * 高度自适应
     * 当表格展示空间小于460按460px展示，大于的时候高度填充
     */
    changeTableHight() {
      if (this.height) {
        //如果有传进来高度就取消自适应
        this.inTableHeight = this.height
        this.$refs.tableRefs.doLayout()
        return
      }
      let tableHeight = window.innerHeight || document.body.clientHeight
      //高度设置
      let disTop = this.$refs.tableRefs.$el
      //如果表格上方有元素则减去这些高度适应窗口，66是底下留白部分
      tableHeight -= disTop.offsetTop + 66
      if (disTop.offsetParent) tableHeight -= disTop.offsetParent.offsetTop
      this.inTableHeight = tableHeight < 460 ? 460 : tableHeight
      //重绘表格
      this.$refs.tableRefs.doLayout()
    },
    selectInit(row) {
      if (row.enableStatus == 2 || row.disable) {
        return false
      } else {
        return true
      }
    },
    getData() {
      let option = {
        // current: this.currentPage,
        size: this.size,
      }
      let key = this.filterParams.page ? 'page' : 'current'
      option[key] = this.currentPage
      let options = Object.assign({}, this.filterParams, option)
      this.loading = true
      this.$dataServer({
        url: process.env.VUE_APP_DE8 + this.dataReadUrl,
        // url: "http://172.17.9.211:9081/api/" + this.dataReadUrl,  //刘
        method: this.requestMethod,
        data: options, //post请求用data
        params: options, //get请求用params
      })
        .then((res) => {
          this.loading = false
          if (res.result) {
            if (res.data.memberCostsPage != undefined) {
              this.tableData = res.data.memberCostsPage.records
              this.total = res.data.memberCostsPage.total
            } else if (res.data.orgCostPage) {
              this.tableData = res.data.orgCostPage.records
              this.total = res.data.orgCostPage.total
            } else if (
              res.data.length === 1 &&
              res.data[0].children.length > 0 &&
              res.data[0].children.length > 0 &&
              res.data[0].children[0].parentName
            ) {
              //组织管理的时候，走了这个路径。
              this.tableData = res.data[0].children
              this.total = res.data[0].children.length
            } else if (res.data) {
              console.log('res.data', res.data, Object.keys(res.data))
              this.tableData = res.data.records
              if (Object.keys(res.data).includes('totalCount')) {
                this.total = res.data.totalCount
              } else if (Object.keys(res.data).includes('total')) {
                this.total = res.data.total
              }
            }
            if (this.ShowSelected) {
              this.$nextTick(() => {
                this.tableData.forEach((ta) => {
                  this.selectedData.forEach((item) => {
                    if (ta.id == item.id) {
                      ta.checked = true
                    }
                  })
                  ta.checked &&
                    this.$refs.tableRefs.toggleRowSelection(ta, true)
                })
              })
            }
          } else {
            this.tableData = []
            this.total = 0
          }
          this.$emit('getData', res.data)
        })
        .catch((error) => {
          this.loading = false
          this.tableData = []
          this.total = 0
          this.$emit('getData', null)
          console.log(error)
        })
    },
    handleSizeChange(val) {
      this.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    getIndex(index) {
      return (this.currentPage - 1) * this.size + index + 1
    },
    handleSelect(selection, row) {
      this.$emit('select', selection, row)
    },
    handleSelectAll(selection) {
      this.$emit('selectAll', selection)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('change', this.multipleSelection)
    },
  },
  watch: {
    filterParams: {
      handler(v, o) {
        // this.getData()
      },
      deep: true,
    },
    tableHeaders: {
      handler(val) {
        console.log('tableHeaders 改变')
        this.headerList = val
      },
      deep: true,
      immediate: true,
    },
    headerList: {
      handler(val) {
        console.log('headerList 改变')
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.table-container {
  // max-height: calc(100vh - 370px);
  overflow-y: hidden;
}

::v-deep .el-table__body-wrapper {
  // max-height: calc(100vh - 470px) !important;
  overflow-y: auto;
}
.pagination-margin {
  margin: 20px 0px;
}
.el-pagination {
  text-align: left;
}
::v-deep .el-pagination__total,
::v-deep .el-pagination__sizes {
  float: left;
}
</style>