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. 上面的两种方法效果都是一样的: 增加自定义事件: 结果: 自信是进步的源泉. 继续加油. ^_^
随机推荐
- input只读效果
有两种方式可以实现input的只读效果:disabled 和 readonly. 自然两种出来的效果都是只能读取不能编辑,可是两者有很大不同. Disabled说明该input无效,及其value不会 ...
- JavaScript对象的property属性详解
JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...
- C++中的赋值兼容性和重写
1,父子间的赋值兼容: 1,子类对象可以当做父类对象使用(赋值兼容性): 1,子类对象可以直接赋值给父类对象: 2,子类对象可以直接初始化父类对象: 3,父类指针可以直接指向子类对象(得到的是子类对象 ...
- luoguP1314 聪明的质监员 题解(NOIP2011)
P1314 聪明的质监员 题目 #include<iostream> #include<cstdlib> #include<cstdio> #include< ...
- 【UR #5】怎样跑得更快
题目 给定\(n,c,d\)和序列\(\{b_i\}\),求一个序列\(\{x_i\}\)满足 \[\sum_{j=1}^n\gcd(i,j)^c\times \rm{lcm(i,j)^d}\time ...
- 【转】Pandas速查手册中文版
本文翻译自文章:Pandas Cheat Sheet - Python for Data Science,同时添加了部分注解. 对于数据科学家,无论是数据分析还是数据挖掘来说,Pandas是一个非常重 ...
- 针对类别的5中softmax_cross_entropy loss计算
# ---------------------------- #! Copyright(C) 2019 # All right reserved. # 文件名称:xxx.py # 摘 要:五种方式实现 ...
- 一、Json
一.Json遍历模糊查询 你没admin 所以这句话报错. //1.写法 dynamic query = from user in jsonObject where (user.ToString(). ...
- rabbitmq一个连接多个信道channel
https://www.cnblogs.com/eleven24/p/10326718.html
- Electron-vue实战(三)— 如何在Vuex中管理Mock数据
Electron-vue实战(三)— 如何在Vuex中管理Mock数据 作者:狐狸家的鱼 本文链接:Vuex管理Mock数据 GitHub:sueRimn 在vuex中管理mock数据 关于vuex的 ...