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吗？那就把需要隐藏的几列全部用一个容器包裹起来。让容器显示和隐藏应该就可以了吧，如下：

恩，试试~~，没错，一切恢复正常了！可以使用这种方法。

PS：element-ui的table列超出部分省略加悬浮提示

<el-table-column :show-overflow-tooltip="true">
</el-table-column>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue大数据表格卡顿问题的完美解决方案

    前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续优化,谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列 项目源代码地址 Github (本地下载) 解决问题核心点:横向滚动加载,竖向滚动加载 项目背景 笔者最

  • Element-UI中关于table表格的那些骚操作(小结)

    Element-UI中关于table表格的那些骚操作(小结)

    最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比较简略,这里简单整理下一些常用的操作,如果有类似的功能可以做一个参考. 具体的使用方法还是建议仔细阅读官网-table章节: https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-s

  • 解决vue 表格table列求和的问题

    最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几乎满足需求了,但是还有个小问题就是列求和没搞定,这可咋整啊.看了element-ui是有这么个功能,遂翻开源码看了下也没看出啥话头,心想算了,自己来实现,网上搜了下,偶然看到一位仁兄的写法,拿过来稍微修改了下,果真是有用,在此感谢那位仁兄!(我本身对前端不专业,侧后端) 下面贴代码: /** jav

  • elementUI中Table表格问题的解决方法

    elementUI中Table表格问题的解决方法

    前言 element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. 在开发vue框架项目时,引入element插件,使用table表格组件时,遇到了一些问题,以下列出以供参考. 1.表格样式问题: 混乱样式.png 正常样式.png 如上图,在当前导航表格table样式是没问题的,但当我点击别的导航去到另外的页面,然后再回到之前的导航页面,表格table的样式就会混乱,随便点击当前页面或刷新亦或拉伸页面,样式又恢复正常,很奇怪的样式问题.

  • element-ui 中的table的列隐藏问题解决

    element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条还有一段距离.所以希望能够切换到简短列可以方便的看见比较重要的几列的内容.用之前的方法<bootstrap>的话,非常简单,直接设置display的显示和隐藏就可以了. 但是放在element-ui中来就不可行了.每一列根本不能直接设置样式,你给每一列设置class-name从而设置样式的话,可能

  • Element UI中table单元格合并的解决过程

    Element UI中table单元格合并的解决过程

    目录 引言 解决思路: 1.格式化后台返回的数据(根据实际数据格式处理) 2.在 data 中定义数据,需要合并几列就定义几个数组和索引 3.定义合并函数 4.table 组件属性 span-method 的单元格合并方法: 完整代码: 总结 引言 项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 table 组件的 span-method 属性.

  • 详解vue2.0的Element UI的表格table列时间戳格式化

    这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • Web Components实现类Element UI中的Card卡片

    Web Components实现类Element UI中的Card卡片

    目录 引言 Web Components 核心组成 1. Custom Elements 2. Shadow DOM 3. templates 和 slots 完整代码 Web Components vs Vue Components Web Components 生命周期回调函数 优点 and 缺点 七.基于web components的框架 引言 Web Components 是一个浏览器原生支持的组件化方案,允许你创建新的自定义.可封装.可重用的HTML 标记.不用加载任何外部模块,直接就

  • element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    el-tree 单选功能 在日常项目开发中,会经常遇到,树形结构的查询方式,为了快速方便开发,常常会使用到快捷的ui组件去快速搭树形结构,这里我用的是 element ui 中的 el-tree .第一次接触这种功能的时候也是各种网站查询,虽然也都能实现功能,但是都会有一些小问题,就很难受,那么我们废话不多说(好像也说了不少呢),直接上效果. el-tree 单选 html 代码 *** 注: load 和 lazy 属性不是需要的粘贴时请删除.(只有需要懒加载的树才需要,关于怎样构建懒加载树以

  • 关于element ui中el-cascader的使用方式

    目录 element ui中el-cascader使用 例→ 代码 element中el-cascader使用及自定义key名 element ui中el-cascader使用 要想实现进入页面直接选中选择器中的选项 例→ 那v-model绑定的值必须是数组形式的!!(element ui官方文档中没提到这一点好像,我也是试了很多次才发现的) 代码 <el-form-item label="分类:" prop="region" class="regi

  • element UI中在 el-select 与 el-tree 结合组件实现过程

    前言 项目上实现某个功能,使用到了 el-select 和 el-tree 组合实现,记录下两者结合的实现过程. 要求根据项目接口提供的数据,el-tree 里的数据是一次性返回来的,点击最后一层级时,请求接口,在点击层级下方追加数据追加的数据要显示勾选框,可进行勾选,且是单选勾选后需要返回勾选的层级以及它的父级 实现效果如下: 数据回显效果: 实现关键部分 el-tree里的显示勾选框不符合当前“追加的数据要显示勾选框,可进行勾选”这个需求,所以我修改了el-tree的源码进行使用. 追加子级

  • Element UI中v-infinite-scroll无限滚动组件使用详解

    目录 一.v-infinite-scroll无限滚动组件使用详解 二.组件无限加载原因及解决方式 三.总结 总结 一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法 2.infinite-scroll-disabled //是否禁用无限滚动加载 3.infinite-scroll-delay //节流时延,单位为ms 4.infinite-scroll-distance //触发加载的距离阈值

  • vue3.0安装Element ui及矢量图使用方式

    vue3.0安装Element ui及矢量图使用方式

    在此只关注v3的安装及使用,如果想了解v2可移步到其官网:https://element.eleme.io/#/zh-CN/component/installation v3官网:https://element-plus.org/zh-CN/guide/installation.html 使用element ui时vue2和vue3的区别 安装命令 main.js中引入文件有所不同 使用icon时v2不需要安装,v3需安装 v2和v3在vue文件中使用icon时编写方式有所不同 icon在v2中

随机推荐