實現效果：

<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-totalshow-sizersize="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 = trueObject.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 = 1this.pageSize = parseInt(this.scrollerHeight / 48) // 48代表的是當前table的tr高度， 【 當前頁的條數 = 當前獲取的高度 / tr的高度 】// 保存所有條數this.dataCount = params.length// 初始化顯示，小于每頁顯示條數，全顯，大于每頁顯示條數，取前每頁條數顯示if (this.dataCount < this.pageSize) {// 當total< pageSize,應該只有[pageSize]this.pageSize = this.dataCountthis.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 = indexvar _start = (index - 1) * this.pageSizevar _end = index * this.pageSizethis.data = this.filterData.slice(_start, _end)},changeSize (size) {this.pageSize = sizevar _start = (this.tCurrentPage - 1) * sizevar _end = this.tCurrentPage * sizethis.data = this.filterData.slice(_start, _end)},listenResizeFn () {console.log('處理窗口縮放時要處理的邏輯操作！')this.scrollerHeight = window.innerHeight - 130this.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('處理窗口縮放時要處理的邏輯操作！')} }

總結

以上是生活随笔為你收集整理的iview-table实现自适应高度渲染表格条数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。