一、element框架中表格的筛选功能使用说明

转载:https://blog.csdn.net/liangxhblog/article/details/80513030

在element ui 框架中,对于table框架,有一个筛选功能,使用方法如下:

1.在要筛选的标签中加:filters属性,它由一个或多个包含text、value值的对象组成的数组。

tableStatus: [{ text: '异常', value: '异常' },{ text: '正常', value: '正常' },{ text: '请假', value: '请假' },{ text: '打卡', value: '打卡' }]

2.如果要使用filter-change方法,就必须在筛选标签的位置里加column-key属性

<el-table-column
label="状态"
prop="status"
column-key="status"
:filters="tableStatus"
align="center">
<template slot-scope="scope">
     <span :class="{red: scope.row.status === '异常', blue: ((scope.row.status === '补打卡') || (scope.row.status === '请假'))}">
    {{scope.row.status}}
    </span>
</template>
</el-table-column>

3.在table标签里加@filter-change事件,用于处理当筛选条件发生变化。

 <el-table //htmlbu部分
:data="tableData"
@filter-change="handleFilterChange"
</el-table>

4.js部分

 
handleFilterChange(filters) {
  console.log(filters);
    console.log('筛选条件变化');
  //这里根据filters,请求新数据可以实现服务器端筛选。
}

注意 : prop 属性若不指定字段名称,筛选将无效。

element框架中表格的筛选功能使用说明(转载)的更多相关文章

  1. 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

  2. 制作类似ThinkPHP框架中的PATHINFO模式功能(二)

    距离上一次发布的<制作类似ThinkPHP框架中的PATHINFO模式功能>(文章地址:http://www.cnblogs.com/phpstudy2015-6/p/6242700.ht ...

  3. 制作类似ThinkPHP框架中的PATHINFO模式功能

    一.PATHINFO功能简述 搞PHP的都知道ThinkPHP是一个免费开源的轻量级PHP框架,虽说轻量但它的功能却很强大.这也是我接触学习的第一个框架.TP框架中的URL默认模式即是PathInfo ...

  4. SSM:spring+springmvc+mybatis框架中的XML配置文件功能详细解释(转)

    原文:https://blog.csdn.net/yijiemamin/article/details/51156189# 这几天一直在整合SSM框架,虽然网上有很多已经整合好的,但是对于里面的配置文 ...

  5. 0927-转载:SSM:spring+springmvc+mybatis框架中的XML配置文件功能详细解释

    这篇文章暂时只对框架中所要用到的配置文件进行解释说明,而且是针对注解形式的,框架运转的具体流程过两天再进行总结. spring+springmvc+mybatis框架中用到了三个XML配置文件:web ...

  6. SSM:spring+springmvc+mybatis框架中的XML配置文件功能详细解释

    这几天一直在整合SSM框架,虽然网上有很多已经整合好的,但是对于里面的配置文件并没有进行过多的说明,很多人知其然不知其所以然,经过几天的搜索和整理,今天总算对其中的XML配置文件有了一定的了解,所以拿 ...

  7. ABP源码分析二十六:核心框架中的一些其他功能

    本文是ABP核心项目源码分析的最后一篇,介绍一些前面遗漏的功能 AbpSession AbpSession: 目前这个和CLR的Session没有什么直接的联系.当然可以自定义的去实现IAbpSess ...

  8. Laravel框架中使用邮件发送功能

    这里是演示的用户注册之后,进行邮件激活的功能. 点击注册之后,系统会自动发送一个份邮件到注册者的邮箱,注册者点击链接激活账号. 先配置laravel中的(.env)文件 MAIL_DRIVER=smt ...

  9. SSM框架中添加写日志功能

    前提:要导入log4j的jar包 在web.xml中输入: <!--日志加载--> <context-param> <param-name>log4jConfigL ...

随机推荐

  1. 解决Ubuntu自带编译器不好使问题

    解决Ubuntu自带编译器不好使问题 1.删除Ubuntu自带的tiny版本,这个版本用起来很别扭不好使. 2.安装full版本的vim 3.显示效果:full版本. 之前自带的版本:

  2. tarjan算法总结

    部分内容引自https://www.cnblogs.com/stxy-ferryman/p/7779347.html Tarjan算法不是一个算法而是一类算法 1.求取强连通分量 强连通分量————有 ...

  3. Linux(lamp安装)

    网络配置 1. 配置ip地址和子网掩码 编辑配置文件: > cd  /etc/sysconfig/network-scripts > cp  ifcfg-eth0  ./ifcfg-eth ...

  4. C++ 使用Lambda

    基础使用: C++中的Lambda表达式详解 c++11的闭包(lambda.function.bind) C++ lambda作为函数参数,实现通用的查找接口 C++11系列-lambda函数 进阶 ...

  5. [转]深入理解 GRE tunnel

    我以前写过一篇介绍 tunnel 的文章,只是做了大体的介绍.里面多数 tunnel 是很容易理解的,因为它们多是一对一的,换句话说,是直接从一端到另一端.比如 IPv6 over IPv4 的 tu ...

  6. 简单读!Mybatis源码(一)一条select的一生

    工具除了会用,还应该多做点.我觉得使用一个软件工具(开源类),一般会经历几个步骤: 1. 通过wiki了解大致作用,然后开始码代码: 2. 系统性地学习其特性,找出可能需要的点,用上去: 3. 通过阅 ...

  7. redis5.0新特性

    1. redis5.0新特性 1.1. 新的Stream类型 1.1.1. 什么是Stream数据类型 抽象数据日志 数据流 1.2. 新的Redis模块API:Timers and Cluster ...

  8. 机器学习入门07 - 验证 (Validation)

    原文链接:https://developers.google.com/machine-learning/crash-course/validation/ 1- 检查直觉 将一个数据集划分为训练集和测试 ...

  9. Python中的注释和解注释

    注释 目标 注释的作用 单行注释(行注释) 多行注释(块注释) 01. 注释的作用 使用用自己熟悉的语言,在程序中对某些代码进行标注说明,增强程序的可读性 02. 单行注释(行注释) 以 # 开头,# ...

  10. Redis Linux 安装运行实战全记录

    下载Redis 去Redis官网下载最新的Linux包,Redis官方没有Windows版的下载. https://redis.io/ 下载后把包上传到Linux服务器. 安装Redis 1.解压Re ...