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 相关文章推荐
javascript制作loading动画效果 loading效果
Jan 14 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
使用vue制作滑动标签
Sep 21 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
canvas多重阴影发光效果实现
Apr 20 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下保存远程图片到本地的办法
2010/08/08 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
两种php实现图片上传的方法
2016/01/22 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
详解python中executemany和序列的使用方法
2017/08/12 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
《秋姑娘的信》教学反思
2014/02/28 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers