element-ui 表格滚动条(不同分辨率)自适应问题;

简介: element-ui 表格滚动条(不同分辨率)自适应问题;
先来说下需求:
表格中的数据,一般分页的时候会导致侧边栏有垂直滚动条,然后由于字段过多,所以水平也有滚动条,想要实现的效果就是无论分页多少,滚动条的位置一直是不变的(水平滚动条一直固定在底部;垂直滚动条固定或者不要)
另外就是需要根据不同屏幕的分辨率进行自适应调整。
实现
1、首先 需要在表格添加对应的字段:

ref="moviesTable"

:height="tableHeight":绑定指定的高度

<el-table v-loading="loading" :data="queryList" @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName" ref="moviesTable" @row-click="clickRow" :height="tableHeight">
2、然后声明对应的字段;

之后监听窗口变化,根据窗口变化自适应计算高度;

export default {
    data(){
        return {
          //表格高度
           tableHeight: 0,
        }
    },
    mounted:function(){
        this.$nextTick(function(){
            this.tableHeight = window.innerHeight - this.$refs.moviesTable.$el.offsetTop - 160;
            // 监听窗口大小变化
            let that= this;
            window.onresize = function() {
            //this.$refs.moviesTable.$el.offsetTop:表格距离浏览器的高度
            that.tableHeight = window.innerHeight - that.$refs.moviesTable.$el.offsetTop - 160
            }
        })
    }
}


相关文章
|
1月前
|
JavaScript
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
47 1
|
1月前
|
JavaScript
vue中有关表格中的表格头中添加悬浮提示的ui问题
vue中有关表格中的表格头中添加悬浮提示的ui问题
70 0
|
1月前
|
JavaScript
vue中有关表格中的表格头中添加悬浮提示的ui问题
vue中有关表格中的表格头中添加悬浮提示的ui问题
29 1
|
1月前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
42 2
|
1月前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
60 1
|
1月前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
|
1月前
|
XML JSON 开发框架
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现
25 1
|
7月前
|
JavaScript
element-ui表格数据样式及格式化案例
element-ui表格数据样式及格式化案例
|
1月前
element-ui实现表格单选的功能
element-ui实现表格单选的功能
18 0
|
1月前
element-ui 表格和 tooltip修改背景颜色和箭头颜色
element-ui 表格和 tooltip修改背景颜色和箭头颜色
337 0