element-ui 中的table的列隐藏问题解决


Posted in Javascript onAugust 24, 2018

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是可行的。至于为啥,我也说不上来。于是就有了这样:

(阶段一)

element-ui 中的table的列隐藏问题解决

其他想要隐藏的列直接也加上v-if='show' 就好了。

element-ui 中的table的列隐藏问题解决

这两个方法是两个简短列和详细列的按钮的click事件,控制数据show的true还是false,

恩,到这里呢,第一阶段的表格列的隐藏和显示就成功了啦。接下来还有个问题是,假设某一列的内容实在太多了,而上面一阶段的每个单元格是没有设置宽度width的,这点需要记住了。于是每一个单元格的宽度都是一样的。这内容超多的一列就显得非常的长,看着实在是糟心。好吧,那就给他设置一个width吧,给这内容太多的一列设置了widht:'180'。

恩,有效果了,再试试切换功能。卡!出现了一个意想不到的问题。单元格的宽度居然变得超级大。滚动条也根本滚不到尽头好吧。。这可是非常愁人。根本不知道为什么切换一下显示和隐藏就带来了这种"惊吓"的效果。无奈还是慢慢的寻找解决的办法。在不断的尝试当中,我发现如果单元格设置了宽度之后,当只有一列使用了v-if:"show"的时候,一切正常。如果有出现多列使用 v-if:"show" 就会出现问题。循着这条路去想。最终我觉得不是只能出现一个 v-if吗?那就把需要隐藏的几列全部用一个容器包裹起来。让容器显示和隐藏应该就可以了吧,如下:

element-ui 中的table的列隐藏问题解决

恩,试试~~,没错,一切恢复正常了!可以使用这种方法。

PS:element-ui的table列超出部分省略加悬浮提示

<el-table-column :show-overflow-tooltip="true">
</el-table-column>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js parentElement和offsetParent之间的区别
Mar 23 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
详解AngularJS 模块化
Jun 14 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 #Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 #Javascript
element-ui 表格数据时间格式化的方法
Aug 24 #Javascript
vue select选择框数据变化监听方法
Aug 24 #Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 #Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 #jQuery
element-ui中的select下拉列表设置默认值方法
Aug 24 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
Python pandas常用函数详解
2018/02/07 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
django 实现简单的插入视频
2020/04/07 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
python基于socket函数实现端口扫描
2020/05/28 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
static函数与普通函数有什么区别
2015/12/25 面试题
园林毕业生自我鉴定范文
2013/12/29 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
研究生毕业鉴定
2014/01/29 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
中学校园广播稿
2015/08/18 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
一行Python命令实现批量加水印
2022/04/07 Python
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL