element-ui 中的table的列隐藏问题
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是可行的。至于为啥,我也说不上来。于是就有了这样:
(阶段一)
其他想要隐藏的列直接也加上v-if='show' 就好了。
这两个方法是两个简短列和详细列的按钮的click事件,控制数据show的true还是false,
恩,到这里呢,第一阶段的表格列的隐藏和显示就成功了啦。接下来还有个问题是,假设某一列的内容实在太多了,而上面一阶段的每个单元格是没有设置宽度width的,这点需要记住了。于是每一个单元格的宽度都是一样的。这内容超多的一列就显得非常的长,看着实在是糟心。好吧,那就给他设置一个width吧,给这内容太多的一列设置了widht:'180'。
恩,有效果了,再试试切换功能。卡!出现了一个意想不到的问题。单元格的宽度居然变得超级大。滚动条也根本滚不到尽头好吧。。这可是非常愁人。根本不知道为什么切换一下显示和隐藏就带来了这种"惊吓"的效果。无奈还是慢慢的寻找解决的办法。在不断的尝试当中,我发现如果单元格设置了宽度之后,当只有一列使用了v-if:"show"的时候,一切正常。如果有出现多列使用 v-if:"show" 就会出现问题。循着这条路去想。最终我觉得不是只能出现一个 v-if吗?那就把需要隐藏的几列全部用一个容器包裹起来。让容器显示和隐藏应该就可以了吧,如下:
恩,试试~~,没错,一切恢复正常了!可以使用这种方法。
转载于:https://www.cnblogs.com/Trista-l/p/8085682.html
element-ui 中的table的列隐藏问题相关推荐
- elementui table 固定列_element-ui 中的table的列隐藏问题解决
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
- element ui中的el-dropdown(下拉框)防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题 当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
- 《前端》Element ui 表格(Table)组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子 下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
- 使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格 上一篇: MongoDB 聚合 下一篇: vue router 路由守卫 登录验证 https://github.com/SheetJS ...
- Web前端笔记-修改element ui中表格样式(透明、去横纵线等含修改思路)
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题 原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
最新文章
- 朴素贝叶斯算法应用实例
- spring源码分析之context
- 科大星云诗社动态20201120
- C# Winform中DataGridView的DataGridViewCheckBoxColumn CheckBox选中判断
- 推荐25款很棒的 HTML5 前端框架和开发工具【下篇】
- java string 日期_java string类型日期比较
- day21 java的数字类
- C# 6.0 的新语法特性
- win10+Xming+Xshell显示远程linux服务器的图形程序窗口
- eclipse下properties配置文件中文乱码解决
- Internet Download Manager互联网下载管理器(简称IDM)无广告弹窗,速度起飞,你值得拥有
- 苹果手机的计算机怎么设置快捷键大全,苹果Macbook快捷键使用大全,超详细!...
- TM1640显示屏驱动IC驱动6位数码管实例
- 开源算法六轴机械臂_我从星期六早上的漫画中学到的开源知识
- Java IO和NIO的区别
- Maven笔记 - 第十章
- 人民币的符号的正确表示法?一杠?两杠?¥还是¥呢?
- 程序猿生存指南-33 寂寞撩人
- QQ签名资料特殊字符大全
- Dcloud云函数服务空间
热门文章
- python扩展库xlwt支持对excel_Python扩展库xlwt支持对Excel2003或更低版本的Excel文件进行写操作...
- 输入两个数,输出两个数之间的偶数
- 设置计算机光驱启动不了怎么办,联想台式电脑设置bios时U盘、光盘都启动不了是怎么回事?...
- jmeter获取token并保存到CSV文件
- 关于工作,为什么本地人干不过外地人?
- 3小时检测:高灵敏度P物质ELISA试剂盒
- 即将加入IT民工行列,毕业年找工作的一些经历和经验
- Python爬虫实战(一):翻页爬取数据存入SqlServer
- HoloLens开发手记 - 空间映射(SpatialMapping)
- YDOOK:ESP8266: 模块设计电路图