vue中如何动态设置iview与element-ui的table高度值
我们在使用 vue 的框架开发的时候,其中列表是大家经常使用的功能,但是放到我们项目中的话,也有很多属性需要我们二次进行改动。
iview
1、页面上:官方的话是推荐使用数字或者字符串,但我们需要的是动态,所以给他加一个动态值:height="now_height"
:
<Table ref="now_table" :height="now_height" > </Table>
data() { return { now_height: null //table 高度 }; }, mounted() { this.now_height = window.innerHeight - this.$refs.now_table.$el.offsetTop - 35 - 120; },
window.innerHeight
当前页面的高度,this.$refs.now_table.$el.offsetTop
拿到的是当前指定table
的top
值。我这里-35-120
是因为我上面还有导航栏还有别的元素,具体你可以根据你的实际情况来定。
element: 原理同上
<el-table ref="now_table" :height="now_height" > </el-table>
data() { return { now_height: null //table 高度 }; }, mounted() { this.now_height = window.innerHeight - this.$refs.now_table.$el.offsetTop - 35 - 120 },
以上就是我是如何动态设置 iview 与 element-ui 的 table 高度值的方法,这里做一个记录,希望能够帮助需要的小伙伴。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue中如何动态设置iview与element-ui的table高度值
码云笔记 » vue中如何动态设置iview与element-ui的table高度值