element-ui中的table的列隐藏问题
element表格横向滚动条
element-ui 中的table和bootstrap中的table的某些设置还是有⼀定的差别的。之前⽤bootstrap做的表格，想要实现简短列和详细列的切换。因为详细列实在有太多列了，拉动滚动条还有⼀段距离。所以希望能够切换到简短列可以⽅便的看见⽐较重要的⼏列的内容。⽤之前的⽅法<bootstrap>的话，⾮常简单，直接设置display的显⽰和隐藏就可以了。
但是放在element-ui中来就不可⾏了。每⼀列根本不能直接设置样式，你给每⼀列设置class-name从⽽设置样式的话，可能也许会存在⼀点问题。。因为每⼀列的class-name的样式是包裹在cell样式中的，⽐如说当你想要在class-name⾥⾯来设置width的话，外层容器cell没变，⾥⾯的内容的width变了，那么内容就会覆盖到后⾯⼀列的内容，并且把⼈家挤开，⾃⼰霸占位置。就会出现页⾯混乱。。感觉好像扯远了的样⼦，，
回到显⽰和隐藏上⾯来，在element-ui中的table中，控制某⼀列的隐藏和显⽰，想到的是使⽤v-show，但是之前⽤过了不⾏，没起作⽤。后⾯⽹上查了⼀下，发现使⽤v-if是可⾏的。⾄于为啥，我也说不上来。于是就有了这样：
（阶段⼀）
其他想要隐藏的列直接也加上v-if='show' 就好了。
这两个⽅法是两个简短列和详细列的按钮的click事件，控制数据show的true还是false，
恩，到这⾥呢，第⼀阶段的表格列的隐藏和显⽰就成功了啦。接下来还有个问题是，假设某⼀列的内容实在太多了，⽽上⾯⼀阶段的每个单元格是没有设置宽度width的，这点需要记住了。于是每⼀个单元格的宽度都是⼀样的。这内容超多的⼀列就显得⾮常的长，看着实在是糟⼼。好吧，那就给他设置⼀个width吧，给这内容太多的⼀列设置了widht:'180'。
恩，有效果了，再试试切换功能。卡！出现了⼀个意想不到的问题。单元格的宽度居然变得超级⼤。滚动条也根本滚不到尽头好吧。。这可是⾮常愁⼈。根本不知道为什么切换⼀下显⽰和隐藏就带来了这种"惊吓"的效果。⽆奈还是慢慢的寻解决的办法。在不断的尝试当中，我发现如果单元格设置了宽度之后，当只有⼀列使⽤了v-if:"show"的时候，⼀切正常。如果有出现多列使⽤ v-if:"show"  就会出现问题。循着这条路去想。最终我觉得不是只能出现⼀个 v-if吗？那就把需要隐藏的⼏列全部⽤⼀个容器包裹起来。让容器显⽰和隐藏应该就可以了吧，如下：
恩，试试~~，没错，⼀切恢复正常了！可以使⽤这种⽅法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。