引入element-resize-detector

在项目引入插件(用来监听元素宽度变化)

npm install element-resize-detector --save

在文件中引入(写在script中,export default{}外面)

let elementResizeDetectorMaker = require("element-resize-detector");

在mounted中写入

let _this = this;
let listenTable = this.$refs.refTable.querySelector(
".el-table__body-wrapper .el-table__body"
);
erd.listenTo(listenTable, function() {
_this.$refs.refTable.doLayout();
});

refTable为el-table元素中绑定的ref值

题外话

可能有人会说,那我不是需要在每个页面上去写上述方法吗?,答案是不需要的,将表格封装成组件,只需在组件中写一遍即可。

网上有些内容是在获取数据接口后调用doLayout方法,或者改变表格宽度如:首先给宽度为100%,渲染数据后在吧宽度给为99%。也可行,但是当你拖动浏览器宽度时或者显示隐藏后就有几率会错位,而且每次获取数据后调用方法,重复工作量挺大的。不想偷懒的程序员不是好程序员

vue中elementui表格错位问题解决(一次到位)的更多相关文章

  1. 实现在vue中element-ui的el-dialog弹框拖拽

    参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...

  2. 在vue 中 element-ui table结合Popover使用

    在vue 中 element-ui table结合Popover使用 <el-table-column label="操作" > <template slot-s ...

  3. 应用五:Vue之ElementUI 表格Table与分页Pagination组件化

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 在平时的web项目开发过程中,列表分页查询展示应用的很频繁,为了便于阅读并减少代码的冗余,所 ...

  4. vue中excal表格的导入和导出

    注意:vue中要实现表格的导入与导出,首先要install两个依赖, npm install -S file-saver xlsx  和  npm install -D script-loader.其 ...

  5. 关于vue 中elementui 的表格边框隐藏

    最近写到一个项目需要实现边框隐藏,网上查找了好多笔记,回答都好含糊不清.为此,记录一下自己的实现方法: 需求: 要将如下表格边框去除                   效果图:           ...

  6. vue 中 element-ui 引入方式

    目录 前言 全部引用 单个引用 前言 有时候只会使用到 Element-ui 的部分功能,为了减少文件体积建议使用分开引用,即只引用使用的功能. 注意:在main.js中使用部分引用的时候是 impo ...

  7. vue中Element-ui样式修改

    下拉框(el-dropdown) // hover 下拉框的hover效果 .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is ...

  8. vue中element-ui树形控件自定义节点,注意一下

    在项目中用到菜单项编辑删除,在 element-ui自定义节点内容时, 有说明:使用render-content指定渲染函数, 得环境支持 JSX 语法,只要正确地配置了相关依赖,就可以正常运行. 一 ...

  9. 解决Vue中element-ui输入框无法输入问题

    <el-input placeholder="请输入内容" v-model="input3" class="input-with-select& ...

  10. vue中element-ui table列名lable换行问题 ---亲测

    1.lable操作 :label = "'xxxxx \n xxxxx'" // 注意 lable 的: 注:双引号内有单引号,这样才可以解析文本.需要换行的文本处添加 \n 2. ...

随机推荐

  1. JS leetcode 找到所有数组中消失的数字 题解分析

    壹 ❀ 引 十天前做的一道题了,一直没整理,今天才花时间去读了官方题解思路,这道题也凸显出了算法思路的重要性,执行耗时差的真不是一点半点.题目来自448. 找到所有数组中消失的数字,题目描述如下: 给 ...

  2. VSCode 编写vue项目之一键生成.vue模版

    1.安装插件Vetur 2.新建用户片段(.vue代码模板) 在弹出的输入框输入:vue.json (如果没有反应,那就尝试只输入"vue") ,接着enter 3.将.vue模板 ...

  3. Oracle SQL 注入攻击

    All about Security - SQL Injection 最近做个一个有关ORACLE数据库安全的网上研讨.我们有1300多位参与者,反馈相当丰富. I recently did a we ...

  4. Java集合框架学习(二) HashSet详解

    HashSet介绍 这个类实现了Set接口,背后是一个hash table(实际上是个HashMap 实例) .它不保证元素的迭代顺序.尤其是,随着时间推 移它不保证某一元素的位置不变.这个类是非线程 ...

  5. Linux中作业控制命令

    开门见山,最近.NET劝退师要在linux上写些长时间运行的脚本,获取Azure BlobStorage存储的数据. 记录一下Linux中后台执行作业的命令. Linux作业 作业(Job)是shel ...

  6. webrtc 的理解

    常规视频的传输包括以下几个步骤:采集,编码,推流,转码,分发,拉流,解码和渲染 在一个实时的音视频系统架构里,上面的每个环节都会有一定程度的优化空间. 以下内容摘自:rtmp直播和webrtc直播对比 ...

  7. dd命令创建文件

    dd if=... of=... bs=... count=... if表示输入文件,of表示输出文件,bs默认指定了以字节为单位的块大小(单位有字节c,字w,块B,千字节m,兆字节m,吉字节G),c ...

  8. linux服务器界面初始--day01

    linux服务器界面初始 ip add show 查看服务器网卡信息还可以使用ifconfig 局域网ip: 192.168.1.0 10.0.0.0 172.16.1.0 如果网卡没有启用,我们需要 ...

  9. ChainMap合并字典

    在python中,我们有两个字典需要合并的时候,可以使用字典的update方法 a = {'a': 1, 'b': 2} b = {'x': 3, 'y': 4} a.update(b) print( ...

  10. 从零开始写 Docker(三)---基于 cgroups 实现资源限制

    本文为从零开始写 Docker 系列第三篇,在mydocker run 基础上基于 cgroups 实现容器的资源限制. 完整代码见:https://github.com/lixd/mydocker ...