隐藏el-table自带的筛选按钮图标，点击表头可实现筛选功能

最新推荐文章于 2024-07-30 08:28:18 发布
最新推荐文章于 2024-07-30 08:28:18 发布
阅读量3k 收藏 2
点赞数
分类专栏： 前端 文章标签： css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syx_cainiao/article/details/107757312
版权
这篇博客介绍了如何在使用Vue.js和ElementUI时，自定义el-table的筛选功能。通过设置CSS隐藏默认的筛选按钮图标，并监听表头点击事件(@header-click)来触发筛选操作，实现点击表头加载筛选项列表。
摘要由CSDN通过智能技术生成

在对elementUI的el-table表格进行筛选操作，在过程中需要点击表头实现筛选功能，加载出筛选项列表，并将自带的筛选项进行隐藏。

筛选项隐藏
在这里插入图片描述

.el-table__column-filter-trigger i{
   
    display: none;
  }

表头实现筛选功能：在el-table上添加 @header-click="handle"
在这里插入图片描述

handle(column, event)
最低0.47元/天 解锁文章
syx_cainiao
关注
专栏目录
element自定义table表头筛选图标
Jiang的博客
03-04 2229
// 自定义表头 headerData: [ { label: '项目类型', prop: 'projectType', select: true, selectValue: [], selectOptions: [ { value: 'Vue', label:.
Element Plus的表格组件中的筛选图标改变
MycoolMy的博客
03-24 2399
表格需要带有筛选功能，就是表头右上角有个图标，但是element的表格组件里面本来就是自带有筛选功能的，但是自带的筛选是下拉框相同的图标。
element ui 修改table筛选按钮为自定义按钮
最新发布
weixin_39531049的博客
07-30 340
前些时间做项目的时候，有个需求是，嫌elementui 自定的筛选按钮 下拉的小三角不好看，需要自定义按钮。从阿里的图片库引入自己想要的图标。在需要修改按钮的vue页面里面修改样式.eTable /deep/ th .cell .el-table__column-filter-trigger .el-icon-arrow-down::before{important;这样就可以修改了筛选图标了，如果需要全局修改可以在app.vue里面去定义全局样式。
element-ui table表头如何筛选并修改筛选图标的样式
xiakexinLO的博客
05-12 6226
element-ui table表头如何筛选并修改筛选图标的样式 1.登录阿里巴巴图标矢量库选择一个心仪的筛选图标添加到购物车 2.然后在右上角进入购物车然后点击添加至我的项目 3.
覆盖element-plus el-table 排序图标
Phoebe_helloworld的博客
08-10 1759
覆盖element-plus el-table 排序图标， 实现图标高亮，背景高亮效果
element-plus ui表格表头筛选功能
泽泽邬的博客
10-12 2681
element-plus ui表格表头筛选功能
el-table render-header 点击事件
weixin_42178050的博客
05-18 2171
https://segmentfault.com/q/1010000015975766
vue el-table实现自定义表头
10-15
示例代码中展示了如何结合el-table和el-table-column实现一个带有自定义操作按钮的表头。在这个例子中，el-table-column的默认插槽（slot）被设置为header，并通过slot-scope接收到了一个scope参数。scope参数包含了...
el-table 点击单元格可编辑 点击表头可修改 右击表头删除表头和内容
weixin_52172289的博客
05-19 1505
项目场景： 提示：这里简述项目相关背景： 点击单元格可编辑 点击表头可修改表头内容 。右击表头删除内容和表头 代码 html <template> <div class="app-container"> <el-table border :data="tableData" style="width: 100%;align: center" max-height="550" :cell-class-na
el-table表头加入筛选功能
m0_53251830的博客
04-26 6904
table表格在表头设置下拉过滤条件/功能
Element-UI：el-table 表头筛选
weixin_44209082的博客
05-17 4675
前言 需求：根据表头筛选表格符合条件的数据 最终实现效果： 情况一：表格没有分页 html 部分： 在列中设置 filters 和 filter-method 属性即可开启该列的筛选。 filters 是一个数组，filter-method 是一个方法，它用于决定某些数据是否显示， 会传入三个参数：value, row 和 column。 <el-table-column prop="UploadStatus" label="上传逻辑" width="100" fixed="l
element-table-过滤及修改过滤icon
神zhi殇的博客
07-26 1895
element
el-table实现列筛选功能，控制列的显示和隐藏（实现简单，效果满分）
热门推荐
weixin_40252368的博客
04-24 1万+
el-tablet添加列筛选功能，控制列的显示和隐藏
el-table表格点击表头获取这列数据，并可以改变选择表头颜色
bbkhhvv的博客
05-29 878
el-table表格点击表头获取这列数据，并可以改变选择表头颜色，再次点击可以取消选择
element-plus：el-table展开图标替换
温柔归故里
04-22 1298
element-plus：el-table展开图标替换
vue el-table 表头搜索（筛选）功能 头部添加搜索icon 点击重置按钮，重置对应字段的筛选条件（三）
dangsh_的博客
11-13 5363
如果在数据筛选时对原始数据进行操作，那么想重置该筛选条件的话，就需要重新获取数据（刷新页面） 不合理，需要实现重置某筛选条件的功能。 组件内部的重置按钮click方法 <el-button size="mini" @click="resetData">重置</el-button> 将组件input框中的数据清空， 组件改为隐藏， 修改icon颜色，触发父组件的resetChange方法 resetData () { console.log('reset')
element-plus如何点击空白处关闭el-popover
young_superc的博客
08-06 5968
element-plus如何手动关闭el-popover
element-plus的el-table自定义表头筛选查询
i_am_a_div的博客
07-17 1225
element-plus的el-table自定义表头筛选查询
el-table自定义表头筛选
05-07
要实现自定义表头筛选，需要在表头中使用el-table-column组件，并设置其prop属性为需要筛选的字段名，然后使用filter-method属性来指定筛选方法。具体步骤如下： 1. 在el-table中使用el-table-column组件，并设置其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值