700字范文 > ＜ elementUi 组件插件： el-table表格拖拽修改列宽及行高及使用注意事项＞

＜ elementUi 组件插件： el-table表格拖拽修改列宽及行高及使用注意事项＞

时间：2022-09-21 02:33:51

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[name="gutter"] {display: table-cell !important;}

具体操作，需要视具体情况而定，原因都差不多，主要是看插件能否正常获取到表格标签。

还有需要注意的是，初次调用情况的思考，比如现在vue项目用的比较多的是单页面应用项目，需要在index页面中，增加router路由监听器及 mounted生命周期的插件调用，当路由跳转/刷新时触发插件函数，就能做到全局覆盖。

> 问题补充：拖拽时导致表格滚动条消失

原因：因为表格内容高度是由外部设置总高度 - 表头高度生成，所以当我们改变表头时，会导致表头容器被撑高，但是下方表格高度是不变的（因为样式问题，element设置了超出遮罩），所以导致滚动条被挤出可视窗口。

> 解决方案

function tableHandle(event) {const newPointX = getMousePos(event).xconst moveX = newPointX - pointXtimer = setTimeout(() => {thCol.forEach((el) => {const width = JSON.parse(JSON.stringify(currentWidth + moveX))if(width >= 100) {el.setAttribute('width', width)} else {el.setAttribute('width', 100)}})}, 0)// 在此添加使用方法changeHeight()}// 改变表格内容容器高度function changeHeight() {// 其实这里是可以直接全局搜容器标签的，但是预想到可能存在多个表格在同一页面的情况，故使用这种庸余的获取父级的方法const thisElBody = thCol[0].parentElement.parentElement.parentElement.parentElement.querySelector('.el-table__body-wrapper')if(thisElBody) {thisElBody.setAttribute('height', `calc(100% - ${thCol[0].offsetHeight}px)!important`)}}

缺陷：不知道什么原因，在表头缩小到某个阈值的时候，高度无法再即时获取，一直都是那个阈值。只有当再次点击的时候才能更新。

这个方法有缺陷，暂时也找不到比较合适的解决方法。暂时用用，仅以抛砖引玉，有更好的再更新上来，也希望各位大佬们能指点一二！

> 问题补充：当一个页面存在两个及两个以上表格时，无法监测拖拽多个表格表头

原因：由于当前拖拽方法是通过查找元素的Node节点，通过监听修改对应节点的样式实现拖拽功能。但是也正因为这个原因，在搜索时，如果页面同时存在两个以上的表格，那么就会导致监听方法无法绑定在多出来的几个表格上，导致功能无法使用！

解决方法也算简单，通过给elementUI的表格组件定义不同的类名，将类名传递到拖拽方法中进行判断，实现事件绑定！不过需要注意一点的是，如果表格是动态表头的话，需要在动态渲染表头后重现调用方法，进行事件绑定！

解决方案

HTML代码（父组件）

<el-tableheader-row-class-name="multipleTableTr"class="multipleTable">...</el-table><el-tableheader-row-class-name="fileTableTr"class="fileTable">...</el-table><script>// 通过传入表格的整体class名称和表头tr节点的class名称，判断不同的表格绑定this.$nextTick(() => {// 此处由于小温将这个拖拽事件挂载在了vue的实例上，所以可以直接在全局调用this.$resizeTable('.fileTable', '.fileTableTr');this.$resizeTable('.multipleTable', '.multipleTableTr');});</script>

拖拽事件Javascript代码内

export default function resizeTable(tableName = '', thsClassName = '') {let thCol,pointX,currentWidth,pointY,currentHeight,TagEl,timer,tagTab,tagTabHeight,changeValueconst ths = document.querySelectorAll((thsClassName ? (thsClassName + ' th') : '.el-table__header th'))const tBodyTr = document.querySelectorAll((tableName ? (tableName + ' .el-table__body tbody') : '.el-table__body tbody'))const tbodys = document.querySelectorAll((tableName ? (tableName + ' .el-table__body-wrapper') : '.el-table__body-wrapper'))···}

完整的文件，将会更新在文件下载中，如有需要大伙可以去下载看看呀！