antdv和element表格，假分页+表格高度处理mixins

javascript 复制代码

// 表格假分页+表格高度mixins
export const tableHeightPagesMixins = {
  data() {
    return {
      dataSource: [], //假分页数据
      tableData: [],
      //分页数据
      currentPage: 1, //当前页
      pageSizes: [20, 50, 80, 100], //分页下拉列表
      pageSize: 20, //每页数量
      total: 0, //总数量
      height: 200, //表格需要-高度
      tableHeight: 0,
    }
  },
  mounted() {
    // 组件加载时设置表格大小
    this.updateTableScrollData()
    // 窗口大小改变时设置表格大小
    window.onresize = () => {
      this.updateTableScrollData()
    }
  },
  destroyed() {
    // 注销onresize事件
    window.onresize = null
  },
  methods: {
    updateTableScrollData() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - this.height
      })
    },
    handleSizeChange(val) {
      //每页数量选择
      this.pageSize = val
      this.setPseudoPagingData()
    },
    handleCurrentChange(val) {
      //当前页选择
      this.currentPage = val
      this.setPseudoPagingData()
    },
    // 假分页
    setPseudoPagingData() {
      // es6过滤得到满足搜索条件的展示数据list
      let list = this.tableData //后端回来表格的数据
      //表格渲染的数据  indexResultsTable:[],
      this.dataSource = list.filter(
        (item, index) =>
          index < this.currentPage * this.pageSize &&
          index >= this.pageSize * (this.currentPage - 1)
      ) //根据页数显示相应的内容
      this.total = list.length
    },
  },
}

使用

javascript 复制代码

import { tableHeightPagesMixins } from '@/mixins/table-height-pages-mixins'
mixins: [tableHeightPagesMixins],

element例子

javascript 复制代码

 <el-table v-show="showFlag == 2" ref="pointMultipleTable" border class="table-box" :data="[damActiveObj]"
      :height="tableHeight" row-key="id" :tree-props="{ children: 'children' }" :expand-row-keys="expandRowKeys">
      <el-table-column v-for="column in columnAttrs" :key="column.prop" :label="column.label" :prop="column.prop"
        :align="column.align || 'right'" :width="column.width" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">
          <span v-if="column.prop === 'evaluateLevelNm'" :style="{
            color: colors[row['evaluateLevel']]
          }">
            {{ row[column.prop] }}
          </span>
          <span v-else>{{ row[column.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>