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中的括号()用法小结
Apr 14 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
vue.js开发环境搭建教程
May 04 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
javascript this指向相关问题及改变方法
Nov 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
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php测试kafka项目示例
2020/02/06 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
js opener的使用详解
2014/01/11 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python实现提取文章摘要的方法
2015/04/21 Python
Python读写ini文件的方法
2015/05/28 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python字典的常用方法总结
2019/07/31 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
详解python变量与数据类型
2020/08/25 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
10的分与合教学反思
2014/04/30 职场文书