iview 的table组件,自带过滤功能
html :
<Table :columns="people" :data="scores"></Table>
data:
people: [
{
title: '姓名',
key: 'examineeName'
},
{
title: '次数',
key: 'examNum'
},
{
title: '状态',
key: 'resultState', //EXAM_NO:未考试,EXAM_FLUNK:不及格,EXAM_PASS:及格
render: (h,params) => { // 根据条件判断内容重写
console.log(params.row.resultState)
switch(params.row.resultState){
case 'EXAM_NO':
return h('span','未考试')
case 'EXAM_FLUNK':
return h('span','不及格')
case 'EXAM_PASS':
return h('span','及格')
}
},
filters: [ // 过滤条件
{
label: '不及格',
value: 'EXAM_FLUNK'
},
{
label: '未考试',
value: 'EXAM_NO'
},
{
label: '及格',
value: 'EXAM_PASS'
}
],
filterMethod (value, row) { // 过滤方法
return row.resultState.indexOf(value) > -1
}
},
{
title: '成绩',
key: 'examScore',
filters: [
{
label: '80分以上',
value: 1
},
{
label: '60分以下',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.grade > 80;
} else if (value === 2) {
return row.grade < 60;
}
}
}, {
title: '完成时间',
key: 'finishDate',
filters: [
{
label: '2018-8-11',
value: '2018-8-11'
},
{
label: '2018-8-21',
value: '2018-8-21'
}
],
filterMethod (value, row) {
return row.finishTime.indexOf(value) > -1
}
},
],
iview 的table组件,自带过滤功能的更多相关文章
- iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件
这篇文章主要介绍了iview的table组件中使用选择框,日期,可编辑表格,超链接等组件. 1.select选择组件 // tableColumn数组响应对象需要传入一个固定的option数组,如果该 ...
- iview修改table组件实现循环向上滚屏
前提,最近项目中需要实现table的滚屏效果,并且使用的是iview的table组件,踩坑,填坑如下. 1.首先找到Table组件中的table,就是这个class:ivu-table-body te ...
- vue货币格式化组件、局部过滤功能以及全局过滤功能
一.在这里介绍一个vue的时间格式化插件: moment 使用方法: .npm install moment --save. 2 定义时间格式化全局过滤器 在main.js中 导入组件 import ...
- iview中page组件的跳转功能BUG解决方案
xl_echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!! 在 ...
- 【Vue】IView之table组件化学习(二)
最基本的绑定table是这样的,需要columns和data两个属性. <template> <Card> <h4>表格栗子</h4> <Tabl ...
- IView 使用Table组件时实现给某一列添加click事件
通过给 columns 数据的项,设置一个函数 render,可以自定义渲染当前列,包括渲染自定义组件,它基于 Vue 的 Render 函数. render 函数传入两个参数,第一个是 h,第二个是 ...
- 移除 iview的Table组件固定两头后box-shadow阴影效果
.ivu-table-fixed{ box-shadow:0 0 0 #fff; }
- Iview 在Table组件中添加图片
要先简单了解render函数的使用. 直接上代码: { title: "商品图片", key: "commodityPhoto", align: 'center ...
- iview 在Table组件中使用switch组件并自定义内容和增加自定义事件
注意: 使用render函数. 效果: 添加自定义文字: 1. 2. 上面的两种方法效果都是一样的: 增加自定义事件: 结果: 自信是进步的源泉. 继续加油. ^_^
随机推荐
- mySQL部分疑问和小结(orale)
2015/10/15 1.mysql语句: ALTER table scfz_xewp add BGR varchar(255) after KYR 2.创建触发器时: --/ CREATE D ...
- Flask+elasticsearch实现搜索引擎入门教程+Curl调试
前几天,在github上看到了一个关于elasticsearch的小项目,有点小兴趣,于是就结合着Flask,研究了一下,分享给大家. 准备资料: 1.安装elasticsearch 参考教程:htt ...
- Mac中的brew
最近要研究字体识别tesseract,才了解到brew,惭愧惭愧. 1.brew是一个软件包管理工具,类似于centos下的yum或者ubuntu下的apt-get,非常方便,免去了自己手动编译安装的 ...
- django中动态生成二级菜单
一.动态显示二级菜单 1.修改权限表结构 (1)分析需求,要求左侧菜单如下显示: 客户管理: 客户列表 账单管理: 账单列表 (2)修改rbac下的models.py,修改后代码如下: from dj ...
- 前端学习(二十三)DOM操作,事件(笔记)
javascript 组成部分 1.ECMAScript javascript的核心解释器 2.DOM Document Object Modle 文 ...
- 力扣——single number (只出现一次的数字) python实现
题目描述: 中文: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 英 ...
- 大数据基础环境--jdk1.8环境安装部署
1.环境说明 1.1.机器配置说明 本次集群环境为三台linux系统机器,具体信息如下: 主机名称 IP地址 操作系统 hadoop1 10.0.0.20 CentOS Linux release 7 ...
- SGU438 The Glorious Karlutka River =)
传送门 sgu原来搬到cf了呀点了好几个链接才找到233 传说中的动态流(?) 反正很暴力就对了QwQ 有容量限制->拆点 对于每个点拆成入点和出点 时间限制->分层 对于每个时刻的每个石 ...
- Fiji-imageJ 无法打开
可能的原因是文件的路径包含中文名称.
- centos 6.5 安装 zookeeper
从zookeeper官方网站下载安装包:zookeeper-3.4.9.tar.gz,解压安装 tar xvf zookeeper-3.4.9.tar.gz -C /usr/java cd /usr/ ...