el-table中可以在一行的某列进行筛选,代码如下:

 <el-table-column prop="classOfTest" class="test" label="测试类名" :filters="classList" filter-placement="bottom-start" width="300" column-key="testOfClass"></el-table-column>

其中 filters 就是筛选列表,格式为 classList = [{text: 'Test_配电箱自动识别', value: 'Test_配电箱自动识别'},{text: 'Test_门自动识别', value: 'Test_门自动识别'},……]

filter-placement 指定了筛选框的位置。

界面图如下:

在筛选的数据项比较少的情况下,可以正常展示,但是如果筛选的数据项很多,这样一屏就展示不全,所以需要添加样式进行控制,可以通过chrome的F12打开控制台,然后找到该筛选框,重写样式:

  .el-table-filter {
max-height: 500px;
overflow: auto;
}

vue Element-ui 表格自带筛选框自定义高度的更多相关文章

  1. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  2. vue+element ui 表格自定义样式溢出隐藏

    样式 .hoveTitle { text-align: left; width: 140px; overflow: hidden; text-overflow: ellipsis; white-spa ...

  3. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  4. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  5. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  6. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

  7. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  8. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  9. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

随机推荐

  1. java----代理机制或动态类的生成

    在学习Spring的时候,我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于IoC,依赖注入就不用多说了,而对于Spring的核心AOP来说,我们不但要知道怎么通过AOP来满足的 ...

  2. linux -- chcp

    mysql在控制台中,插入数据到数据库的某个表中,插入的数据中有中文,结果一直显示错误Incorrect string...,不能插入成功 猜测是编码格式不一致.可通过chcp命令修改控制台编码格式 ...

  3. 【UVa】Jump(dp)

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  4. 【BZOJ】1696: [Usaco2007 Feb]Building A New Barn新牛舍(贪心)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1696 原题要求min(sum{|x-xi|+|y-yi|}),且一定要看题:“没有两头牛的吃草位置是 ...

  5. 学习:base64和图片。

    一.网页即时聊天中,客户端A可以将图片转换为base64,发送到客户端B(可能经server端转发) 再由base64转换为图片. 关键字搜索:url.base64.

  6. 修改UE4的deriveddatacache目录位置,扩大C盘空间

    按照默认安装目录,UE4会装在C盘 C:\Program Files\Epic Games\UE_4.15 DerivedDataCache缓存目录在 C:\Users\你的用户名\AppData\L ...

  7. IOS 设置ios中DatePicker的日期为中文格式

    设置ios中DatePicker的日期为中文格式 1.在模拟器中的“设置”-“通用”-“多语言环境”-“语言”设置为“简体中文”, 2.“区域格式”设置为“中国”.

  8. 逐一取Map值

    String[] mKeys = starDetil.getRows().keySet().toArray(new String[starDetil.getRows().size()]); starD ...

  9. powerdesinger导出数据库说明文档

    设置表结构要展示的属性,以及各个属性的展示列宽 不显示标题 右键单击items,选择format,然后Available栏中选择ListText选项卡,设置表格边框 保存为模板,Report-> ...

  10. 解决CMD编译中文乱码

    chcp 是MD DOS中的命令,用了显示或设置活动的代码编号的,用法查看当前编码格式(系统默认为:936  #936表示的是gb2312) chcp 修改当前编码格式(修改为utf-8) chcp ...