element-table-过滤及修改过滤icon

最新推荐文章于 2025-04-16 10:00:20 发布

开水没有冬天

最新推荐文章于 2025-04-16 10:00:20 发布

阅读量2.3k

点赞数 1

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42995876/article/details/125988992

版权

本文探讨了前端页面如何实现设备状态过滤，分析了是否需要将过滤操作转化为调用接口的方式。通过`filterHandler`函数展示了前端过滤的实现，而`filterChange`则用于在用户点击筛选按钮后更新搜索参数并刷新列表。此外，还涵盖了自定义过滤图标、清除过滤器的功能，并提供了相关样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

/**
 * 设备状态过滤
 * 目前是前端页面过滤，是否要做成调用接口的过滤？？
 */
// 过滤筛选：不调用接口
filterHandler (value, row, column) {
  console.log('value:', value, 'row:', row, 'column:', column)
  /* this.searchParams.fieldStatus = value
   this.search(true)
   return false*/
  const property = column['property']
  return row[property] === value
},

// 过滤筛选：调用接口
filterChange (filters) {
  console.log('filters:', filters)
  /***
   * 如果不自定义custom-status这个key，那么就是element自动生成的!
   * {
   *   custom-status: (2) ['online', 'offline', __ob__: Observer]
   * }
   */
  this.searchParams.fieldStatus = filters['custom-status']
  this.search(true)
},
},

filter-mutiple：单选；默认是多选
filter-method：前端过滤，每一行都执行
filter-change：点击‘筛选’按钮后执行的，里面可以做接口调用，刷新列表

更换过滤icon

::v-deep .el-icon-arrow-down {
  vertical-align: middle;
}

 /*把icon的content更换了*/ 
::v-deep .el-icon-arrow-down:before {
  content: "\e6ca";
  font-size: 18px;
}

::v-deep .el-table__column-filter-trigger i {
  color: #323233;
}

::v-deep .el-table__column-filter-trigger {
  line-height: 23px;
}

  <el-button @click="resetDateFilter">清除日期过滤器</el-button>
  <el-button @click="clearFilter">清除所有过滤器</el-button>

// 手动清除过滤：
      resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },