element Table表格错位，固定fixed错位

2024-04-09 16:26:31

表格错位图

问题：数据返回会产生从错乱

1.解决问题

绑定

htmel

methods

doLayout() {

if (this.$refs.multipleTable) {

this.$nextTick(() => {

this.$refs.multipleTable.doLayout()

})

}

},

这里要注意的是要判断$refs

watch 监听

竟然是数据返回会导致固定右侧发生错乱，那么就要监听数据返回时调用此方法

watch: {

tableData(val) {

this.tableData = val

this.doLayout()

},

}

2.浏览器

上面是数据返回发生错乱，但同样浏览器窗口缩小放大也会产生错乱，这里就要用到 window.onresize监听浏览器窗口

解决：

在定义data两个变量值

screenWidth: '',

screenHeight: ''

mounted

// fixed浏览器窗口缩小放大导致错位

this.screenWidth = document.body.clientWidth

this.screenHeight = document.body.clientHeight

// 监听浏览器窗口

window.onresize = () => {

return (() => {

this.screenWidth = document.body.clientWidth// 窗口宽度

this.screenHeight = document.body.clientHeight// 窗口高度

if (this.screenWidth && this.screenHeight) {

this.doLayout()// 调用方法

}

// console.log(this.screenWidth)

// console.log(this.screenHeight)

})()

}

完毕

element Table表格错位，固定fixed错位相关推荐

element table表格里的多选按钮，根据条件判断是否可以被选中
element table表格里的多选按钮,根据条件判断是否可以被选中 <el-table v-loading="loading" :data="contentLi ...
LODOP打印table表格宽度固定-超宽隐藏
之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认 ...
element Table表格实现前x行恒展示，不会被折叠，设置点击表头按钮排序。
table表格前X行恒展示不会被折叠. 表头筛选按钮示意图: // data --渲染的数据(每一列每一行),请求回来的. 默认通过字段名和每一个headers对象中每一个prop来对应起来渲染数据的 ...
element table表格合并行和列
element-ui 官网案例: table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当前行号row ...
Element Table 表格设置滚动条以及修改边框颜色
本文中使用element UI表格,需求是给表格设置滚动条.查找了一些方法,包括查找插件解决效果都达不到要求.特此写下此文,便于日后使用和学习交流. 一.需要实现的效果图二.直接上代码 app是是挂 ...
笔记：Element table表格固定列横向滚动条无法拖动的问题解决
一段样式解决战斗
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用
一.效果图目前10种筛选类型看看是否是你需要的,本文可能有点长 ,我尽可能的给讲清楚,包括源码附上二.无聊发言点击当前行跳转部分数据后缀追加图标某列数据根据状态增加颜色标识三.前言实现 ...
使用element table表格实现后端排序
1.在el-table-colum中将sortables设置为custom,在table中监听sort-chang事件,在事件获取当前排序的字段名和排序顺序,向接口发送排序后的表格数据. <el ...
element table 汇总数据固定在第一行
在项目中利用element组件写后台管理管理系统,需求需要汇总数据固定在第一行,而组件里只有固定在最后一行,所以修改了下样式便可以解决问题:如下所示: /deep/ .el-table{display ...

最新文章

热门文章