el-table cell 单元格内文字发生位移，多了margin

原创已于 2023-05-07 17:29:57 修改 · 538 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2023-05-07 17:28:50 首次发布

在项目开发中遇到表格显示异常，翻页或添加操作后，表格样式出现问题。问题可能源于单元格合并，具体是.el-tooltip类内的行内样式。解决方案是通过JavaScript获取所有.el-tooltip元素并移除其width属性，以恢复表格正常显示。利用getPropertyValue、setProperty和removeProperty方法可以对行间样式进行操作。

今天写项目的时候遇到一个坑，写的好好的当我进行翻页操作或者添加操作的时候，

table显示变成这样了

造成的原因目前无从知晓，但是大概率是使用单元格合并的问题，

因为之前从来没有遇到过，研究了一段时间，他是因为 .cell .el-tooltip 里面有一个行内样式

解决方法：

在获得列表（getList）的时候，把行内元素全部删除

const list = document.querySelectorAll(".el-tooltip")
list.forEach(item=>{
	item.style.removeProperty("width");
})

完美展示

getPropertyValue：获取行间样式的属性值（这里的属性值可以想象成key：value的形式，根据key得到值，不过这里的key并不是自定义的而是css里面的）
setProperty：获取行间样式的属性值（‘color’，‘red’，‘important’）可以放三个值，第一个是属性名称，第二个是属性值，第三个是优先级
removeProperty：删除行间样式的属性（这个好理解，就是根据key删除值的形式）