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;
    }
     }

在这里插入图片描述

相关文章

buuctf-buyflag

翻了页面,看了源代码,都没什么信息 右上角有个MENU...

动态数组(vector)

头文件#include<vector> 创建一个动态数组vector<...

深度学习核心技术精讲100篇(七十六)-分类-决策树

深度学习核心技术精讲100篇(七十六)-分类-决策树

一、决策树 所谓决策树,就是自顶而下树形的结构,每一个节点都是一个属性。用决策...

golang exec.Command 执行命令 返回详细错误信息

当我运行下面的代码: cmd := exec.Command(&...

发表评论    

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