iview-table实现自适应高度渲染表格条数

实现效果：

<template>
  <div :style="{ height: scrollerHeight + 'px' }">
    <div>
      <Input v-model="searchForm.name" icon="md-search" style="width: 30%;" @keyup.enter.native="search()"></Input>
    </div>
    <br>
    <Table
      :columns="columns"
      :data="data"
    >

    </Table>
    <div style="margin-top: 5px;float: right;">
      <Page
        :total="dataCount"
        :current="tCurrentPage"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        show-total
        show-sizer
        size="small"
        @on-change="changepage"
        @on-page-size-change="changeSize"
      ></Page>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        {
          title: "Name",
          key: "name"
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        }
      ],
      data: [],
      searchForm: {
        name: ''
      },
      dataCount: 0, // 初始化信息总条数
      pageSize: 1,
      pageSizeOpts: [10, 15, 20],
      allTableData: [], // 用于分页数据存放
      filterData: [], // 用于存放搜索条件下的数据
      tCurrentPage: 1,
      scrollerHeight: window.innerHeight - 130 // 130指的是table表头的高度 + 除table外，其他模版占的高度（input、margin、padding、page等），需要自己大致算一下！！
    };
  },
  mounted () {
    // 添加监听事件listenResizeFn， 用来监听页面高度的变化
    window.addEventListener("resize", this.listenResizeFn)
  },
  beforeDestroy () {
    // 移除绑定的listenResizeFn事件监听
    window.removeEventListener('resize', this.listenResizeFn)
  },
  watch: {
    scrollerHeight (val, oldVal) {
      console.log('scrollerHeight Change: ' + val, oldVal)
        return val - 130 // 跟初始化同理
    }
  },
  created () {
    this.init() // 后台接口获取table数据
  },
  methods: {
    init () {
      // 这里是api接口拿数据的地方，拿到数据先缓存起来，方便页面input的搜索条件进行数据的查询
      this.allTableData = [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow2",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow3",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow4",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow5",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow6",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow7",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow8",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow9",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow10",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow11",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow12",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow13",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow14",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow15",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow16",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow17",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow18",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow19",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow20",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow21",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow22",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow23",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "Jon Snow24",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ]
      this.search()
    },
    search () {
      // 这里是对表格中出现的所有数据进行的模糊搜索，只要包含search的搜索条件，均返回其结果！！
      this.filterData = []
      this.allTableData.filter(item => {
        let flag = true
        Object.keys(item).map(key => {
          if (JSON.stringify(item[key]) && JSON.stringify(item[key]).toLowerCase().indexOf(this.searchForm.name.toLowerCase()) !== -1 && flag) {
            this.filterData.push(item)
            flag = false
          }
        })
      })
      this.showCurrentPage(this.filterData)
    },
    showCurrentPage (params) {
      this.tCurrentPage = 1
      this.pageSize = parseInt(this.scrollerHeight / 48) // 48代表的是当前table的tr高度， 【 当前页的条数 = 当前获取的高度 / tr的高度 】
      // 保存所有条数
      this.dataCount = params.length
      // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
      if (this.dataCount < this.pageSize) {
        // 当total< pageSize,应该只有[pageSize]
        this.pageSize = this.dataCount
        this.pageSizeOpts = [this.dataCount]
        this.data = params
      } else {
        this.pageSizeOpts = [this.pageSize, this.pageSize + 5, this.pageSize + 10]
        this.data = params.slice(0, this.pageSize)
      }
    },
    changepage (index) {
      this.tCurrentPage = index
      var _start = (index - 1) * this.pageSize
      var _end = index * this.pageSize
      this.data = this.filterData.slice(_start, _end)
    },
    changeSize (size) {
      this.pageSize = size
      var _start = (this.tCurrentPage - 1) * size
      var _end = this.tCurrentPage * size
      this.data = this.filterData.slice(_start, _end)
    },
    listenResizeFn () {
      console.log('处理窗口缩放时要处理的逻辑操作！')
      this.scrollerHeight = window.innerHeight - 130
      this.showCurrentPage(this.allTableData)
    },
  }
}
</script>

处理窗口缩放

我们习惯性使用下面的方法：

 window.onresize = () => {
   return (() => {
        // 缩放执行的操作！！
    })
}

但是上述方法在onresize被多次调用时，会导致触发执行的相关操作未生效！这是因为onresize本身就是一个回调函数，当其改变的时候，前一个就会被覆盖。

解决办法：事件监听 addEventListener(event , function, useCapture)
其中， event: 监听的事件，不需要加前缀；function: 事件触发之后调用的函数；useCapture: true为捕获，false为冒泡

mounted () {
  // 添加监听事件listenResizeFn， 用来监听页面高度的变化
  window.addEventListener("resize", this.listenResizeFn)
},
beforeDestroy () {
  // 移除绑定的listenResizeFn事件监听
  window.removeEventListener('resize', this.listenResizeFn)
},
methods: {
  listenResizeFn () {
    console.log('处理窗口缩放时要处理的逻辑操作！')
  }
}