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图片预加载 JS实现图片预加载应用
Dec 03 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
详解用node编写自己的cli工具
May 23 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
实例详解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
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
原生JS轮播图插件
2017/02/09 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python追加元素到列表的方法
2015/07/28 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Python中return self的用法详解
2018/07/27 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
2014年健康教育实施方案
2014/02/17 职场文书
终止劳动合同协议书
2014/04/14 职场文书
新农村建设典型材料
2014/05/31 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书