/ 前端

组件开发:通用列表页面

<template>
<div class="layout-table">
  <slot name="header"></slot>
  <div style="flex: 1;overflow: hidden" ref="table" >
    <Table  :columns="columns" :data="list" :loading="loading" disabled-hover style="margin-top: 0.5rem" :max-height="tableHeight" >
      <template v-if="col.slot" v-for="col in columns" slot-scope="{ row }" :slot="col.slot">
        <slot :name="col.slot" :row="row" ref="col"></slot>
      </template>
    </Table>
    <Page :current="pageNum" :total="total" style="margin-top: 8px;" @on-change="numChange" show-total show-elevator show-sizer @on-page-size-change="onPageSizeChange"/>
  </div>
</div>
</template>

<script>
import axios from "@/libs/http";
/**
 * @作者:SunMoon
 * @创建日期 : 2021/8/25 16:39
 */
export default {
  name: 'layout-table',
  props: {
    columns: Array,
    filter: Object,
    url: {
      type: String,
      required: true
    },
    method: {
      type: String,
      default: 'post'
    }
  },
  data () {
    return {
      list: [],
      total: 0,
      pageSize: 10,
      tableHeight: 0,
      pageNum: 1,
      deleteTip: '确认要删除该项吗?',
      loading: false,
      _lastComputeTime:0,
      lastComputeTime:0
    }
  },
  mounted() {
    window.addEventListener('resize', this.computeHeight)
    this.computeSize()
  },
  methods: {
    computeHeight(e) {
      if (e.timeStamp - this.$data._lastComputeTime > 1000) {
        this.computeSize()
        this.$data._lastComputeTime= e.timeStamp
      }
    },
    computeSize() {
      this.tableHeight = this.$refs.table.offsetHeight - 58
      console.log(this.$refs.table.offsetHeight)
    },
    initData () {
      this.pageNum = 1
      this.getList()
    },
    refresh(){
      this.getList()
    },
    numChange (i) {
      this.pageNum = i
      this.getList()
    },
    onPageSizeChange (e) {
      this.pageSize = e
      this.getList()
    },
    getList () {
      this.loading = true
      let options = {}
      if (this.method === 'post') {
        options = {
          url: this.url,
          data: { ...this.filter, pageNum: this.pageNum, pageSize: this.pageSize },
          method: this.method
        }
      } else {
        options = {
          url: this.url,
          params: { ...this.filter, pageNum: this.pageNum, pageSize: this.pageSize },
          method: this.method
        }
      }
      return axios.request(options).then(res => {
        if (res.data && res.data.list) {
          this.list = res.data.list
          this.total = res.data.total
        }
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.loading = false
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.computeHeight)
  }
}
</script>

<style scoped lang="less">
.layout-table {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>

组件开发:通用列表页面
分享