元素界面中表格的列隐藏问题解决

element-ui中的表和bootstrap中的表有一些区别。之前用bootstrap做的表想在短列和详细列之间切换。因为明细栏太多，拉滚动条还有一段距离。所以，我希望我能切换到短栏，这样我就可以很容易地看到更重要的栏的内容。用之前的bootstrap方法，非常简单，直接设置显示的显示和隐藏就可以了。

但是放在element-ui中是不可行的。每一列都不能直接样式化。如果为每个列设置类名来设置样式，可能会有一些问题。因为每一列的类名样式都是用单元格样式包装的，比如你想在类名中设置宽度，外容器单元格不变，里面的内容宽度变，那么内容就会覆盖下一列的内容，把人推开，占据他们的位置。会有页面混乱。我觉得我走得太远了。

回到显示和隐藏，在element-ui中的表格中，控制一列的隐藏和显示，想到用v-show，但是之前用了之后就不管用了。网上查了一下，发现用v-if是可行的。至于为什么，我不知道。于是有了这个：

(第一阶段)

只需将v-if='show '添加到您想要隐藏的其他列中。

这两种方法是两个短列和详细列按钮的点击事件，控制数据显示的真假。

现在，隐藏和显示表列的第一阶段是成功的。接下来，还有一个问题。假设一列内容太多，前一阶段每个单元格都没有宽度，需要记住。所以每个单元格的宽度都是一样的。这个内容太多的专栏很长，看起来真的很糟糕。好，我们给他设置一个宽度，内容太多的栏目设置widht: ' 180 '。

嗯，起作用了。再次尝试开关功能。卡片！出现了一个意想不到的问题。细胞的宽度变得超级大。滚动条不会滚动到最后。好吧。这是非常可悲的。我不知道为什么在展示和隐藏之间切换会带来这样的“惊吓”效果。无奈还是慢慢找解决办法。在不断的尝试中，我发现如果设置了单元格的宽度，当只有一列使用v-if:'show '时，一切正常。如果有多列，使用v-if:'show '将导致问题。沿着这条路去思考。最后我觉得只能有一个v-if？然后将所有需要隐藏的列包装在一个容器中。让容器显示和隐藏应该没问题，如下所示：

嗯，试试~ ~，是的，一切都恢复正常了！你可以用这个方法。

PS:元素-UI的表列省略挂起

El-table-column : show-overflow-tooltip=' true '/El-table-column以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。