记录 EleTableMixin（ele-table el-table） eletable EleTable

初始版本EleTableMixin

/** ** ele-table 最大高度计算 ****/
export const EleTableMixin = {
  data() {
    return {
      tableData: [],
      tableMaxHeight: 400,
      total: 0
    }
  },
  computed: {
    options() {
      return {
        data: this.tableData,
        maxHeight: this.tableMaxHeight
      }
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.setTableHeight()
    })
  },
  methods: {
    /**
     * ele-table 的 maxHeight 需要根据页面内容进行计算，
     * 【因为】列表没有数据时没有分页容器，获取到的高度为0
     * 【所以】不能再页面初始化的时候计算 ele-table 最大高度，只能在获取到分页数据后进行计算
     * 【注意】在接口获取分页数据成功之后计算 ele-table 最大高度
     */
    getTableHeight() {
      const AppMain = document.querySelector('.AppMain')
      const searchForm = document.querySelector('.searchForm')
      const tableTopBtns = document.querySelector('.ele-table-button-group')
      const tablePagination = document.querySelector('.ele-table-pagination')
      const AppMainHeight = (AppMain && AppMain.offsetHeight) || 0
      const searchFormHeight = (searchForm && searchForm.offsetHeight) || 0
      const searchFormMarginBottom =
        (searchForm && document.defaultView.getComputedStyle(searchForm).marginBottom) || 0
      const tableTopBtnsHeight = (tableTopBtns && tableTopBtns.offsetHeight) || 0
      const tablePaginationHeight = (tablePagination && tablePagination.offsetHeight) || 0
      return (
        AppMainHeight -
        searchFormHeight -
        searchFormMarginBottom.slice(0, -2) * 1 -
        tableTopBtnsHeight -
        tablePaginationHeight
      )
    },
    // 在接口获取分页数据成功之后调用 setTableHeight 方法，计算 ele-table 最大高度
    setTableHeight() {
      this.$nextTick(() => {
        this.tableMaxHeight = this.getTableHeight()
      })
    },
    // 序号处理
    indexMethod(index) {
      return (this.searchForm.page - 1) * this.searchForm.rows + index + 1
    }
  }
}

页面有其他部分的高度需要减去 - 优化

/** ** ele-table 最大高度计算 ****/
export const EleTableMixin = {
  data() {
    return {
      tableData: [],
      tableMaxHeight: 400,
      total: 0,
      otherHeight: 0 // 页面有其他容器的高度需要减去
    }
  },
  computed: {
    options() {
      return {
        data: this.tableData,
        maxHeight: this.tableMaxHeight
      }
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.setTableHeight(this.otherHeight)
    })
  },
  methods: {
    /**
     * ele-table 的 maxHeight 需要根据页面内容进行计算，
     * 【因为】列表没有数据时没有分页容器，获取到的高度为0
     * 【所以】不能再页面初始化的时候计算 ele-table 最大高度，只能在获取到分页数据后进行计算
     * 【注意】在接口获取分页数据成功之后计算 ele-table 最大高度
     */
    getTableHeight(otherHeight = 0) {
      console.log('otherHeight----', otherHeight)
      const AppMain = document.querySelector('.AppMain')
      const searchForm = document.querySelector('.searchForm')
      const tableTopBtns = document.querySelector('.ele-table-button-group')
      const tablePagination = document.querySelector('.ele-table-pagination')
      const AppMainHeight = (AppMain && AppMain.offsetHeight) || 0
      const searchFormHeight = (searchForm && searchForm.offsetHeight) || 0
      const tableTopBtnsHeight = (tableTopBtns && tableTopBtns.offsetHeight) || 0
      const tablePaginationHeight = (tablePagination && tablePagination.offsetHeight) || 0
      return (
        AppMainHeight - searchFormHeight - tableTopBtnsHeight - tablePaginationHeight - otherHeight
      )
    },
    // 在接口获取分页数据成功之后调用 setTableHeight 方法，计算 ele-table 最大高度
    setTableHeight(otherHeight = 0) {
      this.otherHeight = otherHeight // 页面大小发生变化时要用
      this.$nextTick(() => {
        this.tableMaxHeight = this.getTableHeight(otherHeight)
      })
    },
    // 序号处理
    indexMethod(index) {
      return (this.searchForm.page - 1) * this.searchForm.rows + index + 1
    }
  }
}

图片展示

优化 - 其他容器用类名数组传递遍历计算

/** ** ele-table 最大高度计算 ****/
export const EleTableMixin = {
  data() {
    return {
      tableData: [],
      tableMaxHeight: 400,
      total: 0,
      fatherClass: '', // 父容器类名/id名
      sonClassList: '', // 非列表的子容器类名/id名
      otherHeight: 0 // 页面有其他容器的高度需要减去
    }
  },
  computed: {
    options() {
      return {
        data: this.tableData,
        maxHeight: this.tableMaxHeight
      }
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.setTableHeight(this.fatherClass, this.sonClassList, this.otherHeight)
    })
  },
  methods: {
    /**
     * ele-table 的 maxHeight 需要根据页面内容进行计算，
     * 【因为】列表没有数据时没有分页容器，获取到的高度为0
     * 【所以】不能再页面初始化的时候计算 ele-table 最大高度，只能在获取到分页数据后进行计算
     * 【注意】在接口获取分页数据成功之后计算 ele-table 最大高度
     */
    getTableHeight(fatherClass, sonClassList, otherHeight) {
      const fatherDom = document.querySelector(fatherClass)
      const fatherHeight = (fatherDom && fatherDom.offsetHeight) || 0
      let sonHeighSum = 0
      sonClassList.forEach((sonClass) => {
        const sonDom = document.querySelector(sonClass)
        const sonHeight = (sonDom && sonDom.offsetHeight) || 0
        console.log('sonClass----', sonClass)
        console.log('sonHeight----', sonHeight)
        sonHeighSum += sonHeight
      })

      console.log('fatherHeight----', fatherHeight)
      console.log('sonHeighSum----', sonHeighSum)

      return fatherHeight - sonHeighSum - otherHeight
    },
    // 在接口获取分页数据成功之后调用 setTableHeight 方法，计算 ele-table 最大高度
    setTableHeight(
      fatherClass = '.app-main',
      sonClassList = ['.searchForm', '.ele-table-button-group', '.ele-table-pagination'],
      otherHeight = 20 // otherHeight默认是20是因为 .app-main 有上下内边距各10
    ) {
      this.sonClassList = sonClassList
      this.fatherClass = fatherClass
      this.otherHeight = otherHeight
      this.$nextTick(() => {
        this.tableMaxHeight = this.getTableHeight(fatherClass, sonClassList, otherHeight)
      })
    },
    // 序号处理
    indexMethod(index, { page, rows }) {
      return (page - 1) * rows + index + 1
    }
  }
}