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 相关文章推荐
基于jQuery的图片剪切插件
Aug 03 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
详解vue 图片上传功能
Apr 30 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
原生JS实现拖拽功能
Dec 16 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python实现股市信息下载的方法
2015/06/15 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
python 实现图片批量压缩的示例
2020/12/18 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
客户经理岗位职责
2013/12/08 职场文书
四年级评语大全
2014/04/21 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
师德师风个人总结
2015/02/06 职场文书
停课通知书
2015/04/24 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL