element ui表格实下拉筛选功能(纯前端)

wuchangjian2021-11-15 16:55:39编程学习

1、default-sort中prop传入要排序的字段(接口返回或自己定义的数据)、order代表排序,这里用到降序
2、filters对象中text代表页面中显示的筛选文字,value代表筛选用到的值,在方法中filterHandler用到
3、column 的 key,如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件(绑定的是要对接口中排序的字段)
4、数据过滤的选项是否多选(multiple代表是否查询多条)
5、fliter-methods:数据过滤使用的方法,如果是多选的筛选项,对每一条数据会执行多次,任意一次返回 true 就会显示。参数为value, row, column

<template>
<el-table
        :data="tableData"
        style="width: 100%"
        empty-text="暂无数据"
        ref="filterTable"
      >
        <el-table-column
          prop="deviceType"
          label="设备类型"
          show-overflow-tooltip
          column-key="deviceType"
          :filters="[
            { text: '气象设备', value: 1 },
            { text: '墒情设备', value: 0 },
          ]"
          :filter-method="filterHandler"
          :filter-multiple="true"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.deviceType == 1">气象监测设备</span>
            <span v-if="scope.row.deviceType == 0">墒情监测设备</span>
            <span></span>
          </template>
        </el-table-column>
      </el-table>
</template>

methods: {
// 表头过滤事件
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    }
     }

在这里插入图片描述

相关文章

雷军年度演讲:穿越人生低谷最重要的3个启示

雷军年度演讲:穿越人生低谷最重要的3个启示

2022-08-12 22:47:48 8月11日晚,小米集团创始人、...

8月25日凌晨3时至14时,深圳机场暂停航班运营

8月25日凌晨3时至14时,深圳机场暂停航班运营

2022-08-24 18:55:10 据“深圳交通”微信公众号消息,...

java类加载器、双亲委派、沙箱安全机制全都让你整明白(三万字,收藏慢慢啃)

目录 一、概述 1、类加载的分类 2、类加载器的必要性 3、命名空间 4、类加...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。