vue Element-ui 表格自带筛选框自定义高度
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 表格自带筛选框自定义高度的更多相关文章
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 表格自定义样式溢出隐藏
样式 .hoveTitle { text-align: left; width: 140px; overflow: hidden; text-overflow: ellipsis; white-spa ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- element ui 表格提交时获取所有选中的checkbox的数据
<el-table ref="multipleTable" :data="appList" @selection-change="changeF ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
随机推荐
- Java凝视模板
设置凝视模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是全部需设置凝 ...
- remote指令添加远程数据库
git remote add <name> <url> git remote add origin https://[your_space_id].backlogtool.co ...
- UEditor API 文档
来源:http://www.e4dai.com/ueditor-api/#ue.editor http://www.e4dai.com/ueditor-api/ UE.Editor 依赖 editor ...
- hdu 4496(并查集)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4496. 思路:简单并查集应用,从后往前算就可以了. #include<iostream> ...
- node 下好用的工具
1. supervisor Node Supervisor is used to restart programs when they crash. Node Supervisor 是用来当程序崩溃时 ...
- Group By和Order By的总结
1.Group By 语句中:select指定的字段必须是“分组依据字段”,其他字段若想出现在select中则必须包含在聚合函数中. 例如: select [col1], avg([col2]) ...
- Axure 8 注册码,市面上很多注册码都不行用,但是这个可以。
找了很久了,感谢@Quan-Sunny的转载 Licensee: University of Science and Technology of China (CLASSROOM) Key: DTXR ...
- 二、Android Studio使用——导入jar包,运行、debug都不是问题
[新建AndroidStudio工程,lib导入jar包] 我们的项目代码都在app里面,可以看作是一个Model. src 下面除了我们的代码之外,还有单元测试. 把JAR复制到libs文件 ...
- wap开发体会<转载>
前二天因工作需要,上头要求做一个wap版的网站,到网上学习了一天,弄了个beta版出来(http://wap.luckty.com 功能很一般),整理几点经验如下: 1.wap网站用的是wml标识,非 ...
- 在 Java 应用程序中绑定 Bean 和数据
本指南介绍了 NetBeans IDE 对 Java 应用程序中 Bean 绑定和数据绑定的支持. 要学完本教程,您需要具备以下软件和资源. 软件或资源 要求的版本 NetBeans IDE 版本 7 ...