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-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实现自适应高度渲染表格条数相关推荐

html表格高度自动调整,table表格自适应高度的办法
这篇文章主要为大家详细介绍了table表格自适应高度的办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 关于自适应高度,361源码在以前给大家介绍过ifram ...
html表格高度适应屏幕,Table的自适应高度
第一种:一定高度内容加多时自适应高度,而内容少时DIV有一定最小高度:div { _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ,设置高度 jQu ...
iview table 自定义列_基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件...
1.render渲染函数的介绍字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode. 如果组 ...
alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...
iview table组件里的固定列表格不自适应问题
当在使用iview Table组件里固定列功能时出现表格不自适应宽度问题具体如下解决这个bug 很简单把组件里的 width 改为 minWidth 即可 columns: [{title: ...
vue移动端表格吸顶、行自适应高度、列左侧固定悬浮
简介 1.表头吸顶效果 2.左侧列固定,右侧滑动,表头跟随内容滑动 3.行高自适应番外最近上海疫情,居家办公一月多了,愿阴霾散去.最近网上在正常得市民抱怨中,有很多别有用心之人,数典忘祖,造谣生事 ...
layui的轮播图片自适应大小_解决Layui 表格自适应高度的问题
解决Layui 表格自适应高度的问题鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css .layu ...
Iframe用法的详细讲解(属性、透明、自适应高度)和html中滚动条属性设置
Iframe 用法的详细讲解(属性.透明.自适应高度)和html中滚动条属性设置 scrollbar属性.样式详解 1． overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overfl ...
编写自适应高度的 textarea
文本框是很常见的输入控件,我相信只要写过表单的肯定接触过 textarea 这个元素. OK.但是现在产品经理说了:需要这个文本框可以根据用户输入内容自适应其高度. height: auto 有些初学 ...

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

处理窗口缩放

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

最新文章

热门文章