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. 【BZOJ】1613: [Usaco2007 Jan]Running贝茜的晨练计划(dp)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1613 水题dp 设d[i][j]为i分钟疲劳为j d[i][j]=d[i-1][j-1]+a[i] ...

  2. C# 中的treeview绑定数据库(递归算法)

    近日面试的给我两道题目,一道是IQ测试,第二个就是题目所言 总共两个表 department(id int not null primary key,parentid int,name char(50 ...

  3. Shell应用之遍历回收站RecycleBin

     C++ Code  12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...

  4. hdu 2686(状压dp)

    题目链接:http://poj.org/problem?id=2686 思路:典型的状压dp题,dp[s][v]表示到达剩下的车票集合为S并且现在在城市v的状态所需要的最小的花费. #include& ...

  5. matplotlib库解析

    matplotlib 是python最著名的2D绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中.通过简单的绘图语 ...

  6. JavaScript作用域原理——作用域根据函数划分

    一.一个for实例 <p id="scope3" style="color:red"></p> var pscope3 = docume ...

  7. 【BZOJ4563】[Haoi2016]放棋子 错排+高精度

    [BZOJ4563][Haoi2016]放棋子 Description 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列,要求你在这个矩阵上放N枚棋子(障碍 ...

  8. Docker的基本使用(部署python项目)

    今天开始利用docker来部署项目,当然,首先,需要安装好Docker,这个在我的上篇中写了 一.准备项目 我写的是一个爬取某ppt网站的代码,就一个ppt1.py是爬虫,然后,ppts是存放下载的p ...

  9. Spring + MyBatis中常用的数据库连接池配置总结

    Spring在第三方依赖包中包含了两个数据源的实现类包,其一是Apache的DBCP,其二是 C3P0.可以在Spring配置文件中利用这两者中任何一个配置数据源. DBCP数据源 DBCP类包位于  ...

  10. spring could Windows打包构建docker镜像到linux

    工程模拟参考:http://blog.csdn.net/forezp/article/details/70198649 一.工程结构 二.Pom配置 <build> <plugins ...