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. Unity3D 新版粒子系统 (Shuriken)

    Shuriken粒子系统是继Unity3.5版本之后推出的新版粒子系统,它采用了模块化管理,个性化的粒子模块配合粒子曲线编辑器使用户更容易创作出各种兵分复杂的粒子效果. 创建一个粒子系统的方式有两种: ...

  2. crc32 冗余加密校验

    在数据存储和传输中使用 在ts中要对pat  和pmt 中的数据进行冗余校验 http://blog.chinaunix.net/uid-20321537-id-1966721.html

  3. 【BZOJ】1648: [Usaco2006 Dec]Cow Picnic 奶牛野餐(dfs)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1648 水题.. dfs记录能到达的就行了.. #include <cstdio> #in ...

  4. ps -ef|grep htpd|wd -l

    在Linux下查看Apache的 负载情况,以前也说过,最简单有有效的方式就 是查看Apache Server Status(如何开启Apache Server Status点这里),在没有开启Apa ...

  5. 探索PowerShell----函数

    http://marui.blog.51cto.com/1034148/294775/

  6. 剑指 offer set 25 求 1+2+...+n

    题目 要求不能使用乘除法, for, while, if else, switch, case 等关键字 思路 1. 循环已经命令禁止, 禁用 if, 意味着递归也不能使用. 但即便如此, 我们仍然要 ...

  7. 你真的搞懂ES6模块的导入导出规则了吗

    前言 模块作为ES6规范的核心部分之一,在实际项目开发中经常会看到它的身影,那么我们是否真正了解它的相关规则呢,今天就带大家一起了解一下模块的导入导出规则 导入 ES6模块的导入(即import)大致 ...

  8. 5个基于Linux命令行的文件下载和网站浏览工具

    导读 命令行是GNU/Linux中最神奇迷人的部分,它是非常强大的工具;命令行本身功能多样,多种内建或者第三方的命令行应用使得Linux变得更加健壮和强大.Linux Shell支持多种不同类型的网络 ...

  9. 在input文本框中存入对象格式的数据

    <input id="teaching" type="hidden" name="teachingProgram" /> JQ: ...

  10. MySQL的system命令在渗透测试中的使用以及UDF提权

    声明:下面引用关于SYSTEM的东西是自己之前的内容,是自己没有研究透导致的错误结论:有了错就要改,做技术的不能弄虚作假,时时刻刻要求自己要谨慎,虽然我的博客没人看,但是也要向所有已经看到的人道歉,错 ...