element-ui表格实现表头快速筛选
个人感觉这个功能是比较好用,而且项目中极可能用得到的。记录一下踩过的坑。
首先,产品要求能直接在表头进行快速筛选,饿了么的表格筛选又满足不了需求
filter-method这个方法获取到的参数值,会拿到当先页面中显示的几条数据进行对比,再筛选,而我想要的是,获取我点击的关键字,再调用接口-刷新页面;
废话不多说直接贴代码和效果图;
<el-tableref="table"v-loading="loading":data="tableData"@filter-change="filterChange"@selection-change="handleSelectionChange":header-cell-style="{color:'#697886',height:'56px'}"><el-table-columnlabel="医生类别"width="110":filter-multiple="false"column-key="type"filter-placement="bottom-end":filters="typeOption":show-overflow-tooltip="true"><template slot-scope="{row}">{{ row.type }}</template></el-table-column> </el-table>
filterChange(filters){console.log(filters)if(Object.keys(filters)[0] == "type"){this.params.type = filters.type[0]}if(Object.keys(filters)[0] == "auditStatus"){this.params.auditStatus = filters.auditStatus[0]}this.list() },
关键点:
1、el-table表格的filter-chang;该方法会判断当前点击的是表头具体哪一项;
2、el-table-column中column-key的值要和传参保持一致;也就是需要传给后台查询的参数;例如:params中的type和column-key的type;
附最终效果图
记录那些年踩过的element-ui坑
element-ui表格实现表头快速筛选相关推荐
- element ui表格data搜索重置功能
element ui表格搜索重置功能 本地 1.html <el-input v-model.trim="inputname"></el-input> &l ...
- 《前端》Element ui 表格(Table)组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子 下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
- element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
- element UI 表格做下滑滚动效果,请求接口数据
element UI 表格做下滑滚动效果,请求接口数据,内容记录 import { ElMessage } from "element-plus"; // vue3.0 引入方式/ ...
- element UI 表格实现 表尾合计行 ——小肉包
element UI 表格实现 表尾合计行 --小肉包 可以根据需要计算任意列的合计,效果图如下 说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
- Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框 有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
- element ui表格中的algin属性无效
我们在使用element ui表格中,经常需要调整表格内容的文字对齐位置,例如: 文档中描述是使用algin="left / right / center"调整文字对齐,但是我们使 ...
- element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑 案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...
- Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容)
Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题 需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据 需要向服务端提交一 ...
最新文章
- 在线学位课程_如何选择计算机科学学位课程
- java 入门-helloWorld
- C++ Primer 7.33 练习编写成员函数
- 网页里面的下拉框与数据库交互
- 双目相机定位3d python_用深度学习实现 2D 到 3D 的转换
- 算法笔记 --- 布隆过滤器
- 推荐几个学习GIS的社区
- 设置为首页,加入收藏 | JS完美实现代码收藏
- call center外包公司如何营销成“茶颜悦色”?
- python鼠标画点连线_浅谈画点连线的步骤以及注意事项
- 第二次作业—时事点评
- bzoj 1941 kd-tree求最大最小曼哈顿距离
- 六年级计算机学习,小学六年级计算机学习教案(24页)-原创力文档
- 德国Vue.js2终极开发教程(含Vue路由和Vuex)-Max-专题视频课程
- 分享:从华为转正到离职
- Wandb——Pytorch模型指标可视化及超参搜索
- 对互联网的认识和看法,直接关系到产业互联网的路径发展
- 利用selenium实现淘宝双十一抢购商品
- DP4054国产锂电池500mA充电管理芯片替代LTC4054/TC4054
- aoa计算机有效期,计算机AOA例题