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
            }
        })
    }
}


相关文章
|
4月前
|
JavaScript
vue中有关表格中的表格头中添加悬浮提示的ui问题
vue中有关表格中的表格头中添加悬浮提示的ui问题
54 0
|
15天前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
20 2
|
19天前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
|
1月前
element-ui实现表格单选的功能
element-ui实现表格单选的功能
12 0
|
3月前
element-ui 表格和 tooltip修改背景颜色和箭头颜色
element-ui 表格和 tooltip修改背景颜色和箭头颜色
146 0
|
3月前
|
前端开发 小程序
使用element UI-table表格列宽自适应 【已解决】
使用element UI-table表格列宽自适应 【已解决】
element-ui表格展开行每次只能展开一行
element-ui表格展开行每次只能展开一行
|
4月前
详解element-ui el-table表格中勾选checkbox(selection),高亮当前行高亮某一行(某一行设置特殊的样式)
详解element-ui el-table表格中勾选checkbox(selection),高亮当前行高亮某一行(某一行设置特殊的样式)
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
15 0

热门文章

最新文章