网站建设服务承诺包括什么,泰安网站建设流程,兰州网站seo技术厂家,光谷网站推广elementUi 组件插件#xff1a; el-table拖拽修改列宽及行高 及 使用注意事项#x1f449; 资源Js包下载及说明#x1f449; 使用教程 实现原理 局部引入 全局引入 #xff08;在main.js中#xff09;#x1f449; 注意事项往期内容 #x1f4a8;#x1f4… elementUi 组件插件 el-table拖拽修改列宽及行高 及 使用注意事项 资源Js包下载及说明 使用教程 实现原理 局部引入 全局引入 在main.js中 注意事项往期内容 资源Js包下载及说明
由于项目需求需要给定原先使用的element列表新增一个列宽动态拖拽功能。结合在网上找到的资源出一期 “ 使用事项 ” 及 使用过程中的问题汇总 点击跳转资源下载 使用教程
由于是后期加的功能相信大部分人都不太可能去动原先的组件。所以这个插件正好符合需求全部代码基于原生js,不依赖任何插件可以直接声明使用。 实现原理 列宽的调整最终是通过调整如上图的col元素的width属性实现列宽调整的。 行高的调整是动态改变tbody的 el-table__row 的高度实现调整的。 注意事项 由于是直接引用的Js文件代码内容是针对提前预设获取dom标签给其增加事件监听。因此是针对当前引入页面的所有表格都有效如需要只针对某个表格可以在查找元素的地方传参进行判断。判断代码如下 const ths document.querySelectorAll(.el-table__header th)const tBodyTr document.querySelectorAll(.el-table__body tbody)const tbodys document.querySelectorAll(.el-table__body-wrapper)局部引入
import resizeTable from /utils/tabelleAnpassen;// 调用方法
mounted() {this.$nextTick(() {resizeTable();});
}全局引入 在main.js中
import resizeTable from /utils/tabelleAnpassen;// 挂载在vue的原型上
Vue.prototype.$resizeTable resizeTable;// 在需要使用的地方调用方法
this.$nextTick(() {this.$resizeTable();
});以上这些使用方法得根据实际情况来判断。判断调用方法的位置放在那个位置合适以及有没有那种情况会导致插件失效需要重现调用的情况。 注意事项
在开发中我们的表格往往不是一成不变的可能会使用element表格的其他属性或者是通过Vue指令对其造成影响。 接下来一一讲解出现的问题及解决方案
v-if 指令 包裹列表的情况下 由于v-if会使表格出现一个重载的过程从销毁到重现挂载。 会导致我们之前在调用这个方法的时候获取到的dom失效从而使插件代码无法确定表格是否存在导致代码失效。v-for 指令实现动态表头的情况下由于 v-for 指令需要动态根据不同的数据渲染不同的表头 也对插件获取表格具体的列数有影响影响情况也和上面的 “ v-if ” 差不多的原因。 所以也需要在表头渲染完毕后重现调用一下插件方法。
解决方案 给 v-if / v-for 的判断条件加上一个监听事件watch在其变化后也就是重现挂载后重现调用我们引入的插件方法。
el-table-column 上的 show-overflow-tooltip 属性导致内容无法跟随列宽变化而变化。主要原因是因为加上该属性后列表表格中的内容外面都嵌套了一层 .cell 的 div 且这个div的宽度跟随一开始列表预设的宽度一致导致外面那层表格宽度变化里面还是显示预设的宽度样式。
解决方案 在全局中设置样式覆盖其原先的宽度样式
.el-table .cell.el-tooltip {width: auto !important;
}补充在搜狗浏览器中表格错位问题解决
// 关键css代码
.el-table__header colgroup col[namegutter] {display: table-cell !important;
}具体操作需要视具体情况而定原因都差不多主要是看插件能否正常获取到表格标签。
还有需要注意的是初次调用情况的思考比如现在vue项目用的比较多的是单页面应用项目需要在index页面中增加 router 路由监听器 及 mounted生命周期 的插件调用当 路由跳转 / 刷新 时触发插件函数就能做到全局覆盖。 往期内容 每日小技巧N个很棒的 Vue 开发技巧, 持续记录ing CSDN周赛解析第 27 期 每日算法 - JavaScript解析二叉树灯饰【初识动态规划 - dp 具体理解配合代码看最合适代码均有注释】 JavaScript技术分享 大文件切片上传 及 断点续传思路
