vue中elementui表格错位问题解决(一次到位)
引入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表格错位问题解决(一次到位)的更多相关文章
- 实现在vue中element-ui的el-dialog弹框拖拽
参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...
- 在vue 中 element-ui table结合Popover使用
在vue 中 element-ui table结合Popover使用 <el-table-column label="操作" > <template slot-s ...
- 应用五:Vue之ElementUI 表格Table与分页Pagination组件化
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 在平时的web项目开发过程中,列表分页查询展示应用的很频繁,为了便于阅读并减少代码的冗余,所 ...
- vue中excal表格的导入和导出
注意:vue中要实现表格的导入与导出,首先要install两个依赖, npm install -S file-saver xlsx 和 npm install -D script-loader.其 ...
- 关于vue 中elementui 的表格边框隐藏
最近写到一个项目需要实现边框隐藏,网上查找了好多笔记,回答都好含糊不清.为此,记录一下自己的实现方法: 需求: 要将如下表格边框去除 效果图: ...
- vue 中 element-ui 引入方式
目录 前言 全部引用 单个引用 前言 有时候只会使用到 Element-ui 的部分功能,为了减少文件体积建议使用分开引用,即只引用使用的功能. 注意:在main.js中使用部分引用的时候是 impo ...
- vue中Element-ui样式修改
下拉框(el-dropdown) // hover 下拉框的hover效果 .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is ...
- vue中element-ui树形控件自定义节点,注意一下
在项目中用到菜单项编辑删除,在 element-ui自定义节点内容时, 有说明:使用render-content指定渲染函数, 得环境支持 JSX 语法,只要正确地配置了相关依赖,就可以正常运行. 一 ...
- 解决Vue中element-ui输入框无法输入问题
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select& ...
- vue中element-ui table列名lable换行问题 ---亲测
1.lable操作 :label = "'xxxxx \n xxxxx'" // 注意 lable 的: 注:双引号内有单引号,这样才可以解析文本.需要换行的文本处添加 \n 2. ...
随机推荐
- JS leetcode 找到所有数组中消失的数字 题解分析
壹 ❀ 引 十天前做的一道题了,一直没整理,今天才花时间去读了官方题解思路,这道题也凸显出了算法思路的重要性,执行耗时差的真不是一点半点.题目来自448. 找到所有数组中消失的数字,题目描述如下: 给 ...
- VSCode 编写vue项目之一键生成.vue模版
1.安装插件Vetur 2.新建用户片段(.vue代码模板) 在弹出的输入框输入:vue.json (如果没有反应,那就尝试只输入"vue") ,接着enter 3.将.vue模板 ...
- Oracle SQL 注入攻击
All about Security - SQL Injection 最近做个一个有关ORACLE数据库安全的网上研讨.我们有1300多位参与者,反馈相当丰富. I recently did a we ...
- Java集合框架学习(二) HashSet详解
HashSet介绍 这个类实现了Set接口,背后是一个hash table(实际上是个HashMap 实例) .它不保证元素的迭代顺序.尤其是,随着时间推 移它不保证某一元素的位置不变.这个类是非线程 ...
- Linux中作业控制命令
开门见山,最近.NET劝退师要在linux上写些长时间运行的脚本,获取Azure BlobStorage存储的数据. 记录一下Linux中后台执行作业的命令. Linux作业 作业(Job)是shel ...
- webrtc 的理解
常规视频的传输包括以下几个步骤:采集,编码,推流,转码,分发,拉流,解码和渲染 在一个实时的音视频系统架构里,上面的每个环节都会有一定程度的优化空间. 以下内容摘自:rtmp直播和webrtc直播对比 ...
- dd命令创建文件
dd if=... of=... bs=... count=... if表示输入文件,of表示输出文件,bs默认指定了以字节为单位的块大小(单位有字节c,字w,块B,千字节m,兆字节m,吉字节G),c ...
- linux服务器界面初始--day01
linux服务器界面初始 ip add show 查看服务器网卡信息还可以使用ifconfig 局域网ip: 192.168.1.0 10.0.0.0 172.16.1.0 如果网卡没有启用,我们需要 ...
- ChainMap合并字典
在python中,我们有两个字典需要合并的时候,可以使用字典的update方法 a = {'a': 1, 'b': 2} b = {'x': 3, 'y': 4} a.update(b) print( ...
- 从零开始写 Docker(三)---基于 cgroups 实现资源限制
本文为从零开始写 Docker 系列第三篇,在mydocker run 基础上基于 cgroups 实现容器的资源限制. 完整代码见:https://github.com/lixd/mydocker ...