VUE element-ui之table表格表头下拉筛选功能
步骤:
在需要筛选的列中插槽法:
<el-table-column prop="mount" label="交易量区间" align="left"><!-- eslint-disable-next-line --><template slot="header" slot-scope="scope"><el-dropdown trigger="click" size="medium " @command="handleCommand"><span style="color:#909399">{{ menuText }}<i class="el-icon-arrow-down el-icon--right" /></span><el-dropdown-menu slot="dropdown"><el-dropdown-itemv-for="(item, index) in section":key="index":command="item">{{ item }}</el-dropdown-item></el-dropdown-menu></el-dropdown></template></el-table-column>
data中定义下拉列表:
data() {return {menuText: '交易量区间',section: ['一万','两万','三万']}
}
在methods中定义筛选方法:
// 表格筛选handleCommand(item) { //这里定义方法可在选取时触发this.menuText = item}
效果如图:
VUE element-ui之table表格表头下拉筛选功能相关推荐
- Element UI 之table表格表头过长使用点点…显示,并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示 需求 鼠标移入表头 关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
- Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
- Element UI 之table表格表头过长使用点点...显示,并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
- elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
- 【Element ui 的NavMenu二级菜单下拉icon修改】
Element ui 的NavMenu二级菜单下拉icon修改 原来是这样的,下拉icon在右边 修改成icon在左边,并更改icon的形状 修改icon的css属性,覆盖原来的.需要注意的是取消打开 ...
- element ui中的el-dropdown(下拉框)防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题 当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
- element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图 解决方法: Step1:在app.vue中加入css样式 <st ...
- element ui 的table的表头和表格没对齐
在 app.vue的style里面加上 /* 解决element-ui的table表格控件表头与内容列不对齐问题 */.el-table th.gutter{display: table-cell!i ...
- vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件 核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...
最新文章
- linux中的shell有printf吗,Linux Shell系列教程之(八)Shell printf命令详解
- CAD2009软件安装资料及教程
- k2677场效应管参数引脚_共射极放大电路,场效应管放大电路,运算放大电路
- linux 查看系统组账号密码是什么,Linux 用户与组管理详解(system-config-users 命令行)...
- linux 根目录read only,linux – 使readonly / etc可写
- 开发框架:AdminLTE
- 新年礼物 | 今天可以免费领取3980的Hadoop视频教程!
- session是什么,存储在哪里
- C语言:基于Easyx库实现连连看小游戏
- 干货全拿走-用Excel构建股票量化交易模型
- 无线教育带来BYOD的A+体验
- android视频录制、另一部手机实时观看方案
- 晶体二极管的分类大全
- [BZOJ2959]长跑——新技能:LCT+缩圈
- 互联网快讯:国家植物园在北京正式揭牌;极米Z6X Pro、极米H3S获赞赏;人民币兑日元逼近20大关
- 互联网晚报 | 5月19日 星期四 | 腾讯起诉vivo不正当竞争;市监局将立案调查妇炎洁问题广告;天津高考调整至6月12日举行...
- mxGraph xml to json方法
- c与c++的struct区别
- 宋宝华:递归的出口在哪里? (除夕创作年度最后一篇文章)
- golang邮箱发送验证码
热门文章
- 使用navicat备份和还原数据库
- java-php-python-ssm一中体育馆管理系统计算机毕业设计
- GO语言GET安装问题{cccccccccccccccccccc}
- 在GitLab中集成Azure Kubernetes
- 程序运行出现 UndefinedMetricWarning: Precision and F-score are ill-defined and being set to 0.0 in labels
- xheditor使用方法记录
- 仿真引擎-文献总结笔记一
- 生态建筑大师ECOTECT学习和AIRPAK软件的安装
- Qt框架类图大全,类继承关系一图搞定
- Python图片转换为PDF