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. 上面的两种方法效果都是一样的: 增加自定义事件: 结果: 自信是进步的源泉. 继续加油. ^_^
随机推荐
- jvm学习(1) 总体篇
1.1 Java体系构成 JAVA体系包括四个方面: JAVA编程语言,编辑的文件为Java源代码,文件格式为(.java): JAVA类文件格式,编译后文件格式为(.class): JA ...
- c#各类DI容器
IOC控制反转:说的是创建对象实例的控制权从代码控制剥离到IOC容器控制,实际就是你在xml文件控制,侧重于原理. DI依赖注入:说的是创建对象实例时,为这个对象注入属性值或其它对象实例,侧重于实现. ...
- html input标签 要求只能输入纯数字
在input标签添加以下代码即可 oninput = "value=value.replace(/[^\d]/g,'')" <input type="text&qu ...
- brew install ''package卡在Updating Homebrew
关闭自动更新: export HOMEBREW_NO_AUTO_UPDATE=true
- 使用Maven创建Web项目(转)
转自:http://ju.outofmemory.cn/entry/49508 本文通过Maven完成一个简单的Web项目(注意,Spring配置不是重点,看看就行) 1.从Maven模板创建Web应 ...
- CentOS 7 virtualenv创建python3与python2的环境&&运行项目
(一)安装virtualenv 可以 yum -y install python-virtualenv 或者pip install python-virtualenv (二)在希望的路径下,创建e ...
- svn解决方案
1.svn回退 revert to this version 2.不同svn路径拉倒一个本地文件夹,报错"已经指向不同的url工作副本": 删除文件夹中的.svn文件夹 3.sv ...
- v-bind属性,v-model属性,:model属性
一.v-bind 1.将按钮的title(key)绑定为data里指定的值 强调<input type="button" value="按钮" v-bin ...
- SSD算法的实现
本文目的:介绍一个超赞的项目--用Keras来实现SSD算法. 本文目录: 0 前言 1 如何训练SSD模型 2 如何评估SSD模型 3 如何微调SSD模型 4 其他注意点 0 前言 我在学习完SSD ...
- BioGRID 互作数据库
01 — BioGRID BioGRID 是 Biological General Repository for Interactionh Datasets 的缩写(网址为 https://thebi ...