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. 上面的两种方法效果都是一样的: 增加自定义事件: 结果: 自信是进步的源泉. 继续加油. ^_^
随机推荐
- UVALive 4992 Jungle Outpost(半平面交判存)
Jungle Outpost Time limit: 15.000 seconds Description There is a military base lost deep in the jung ...
- spring静态资源配置
优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...
- setlocale - 设置当前的区域选项
总览 (SYNOPSIS) #include <locale.h> char *setlocale(int category, const char * locale); 描述 (DESC ...
- react 使用axios
1.配置axios代理 使得axios 可以不写根路径 package.json "proxy":"http://localhost:4000", 2.使用 ...
- docker-ce创建gitlab-ce容器笔记
前言 vagrant + ubuntu 16.04 设置 apt 源 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak sudo vim ...
- OpenCV常用基本处理函数(2)图像基本操作
可以根据像素的行和列的坐标获取他的像素值.对 BGR 图像而言,返回值为 B,G,R 例如获取蓝色的像素值: img=cv2.imread('messi5.jpg')px=img[100,100]bl ...
- Windows10 通用快捷键命令
总想着甩掉鼠标,来一种只用键盘的各种行云流水般的快捷操作,在网上各个论坛,博客,搜索引擎,最后终于记录整理了出来! 为了尝试新的命令提示符下,只需 打开开始菜单,然后键入cmd并回车. 按Ct ...
- Java中Calendar类的常用方法(对时间进行计算的类)
例子: /**** * 传入具体日期 ,返回具体日期增加一个月. * @param date 日期(2017-04-13) * @return 2017-05-13 * @throws ParseEx ...
- Docker 镜像添加模块
Docker 镜像添加模块 1. 使用root用户进入一个新容器,不要用 --rm .否则退出容器的时候,容器没有了 docker run --user 0 -it --name superman ...
- Delphi 字符串函数StrUtils单元AnsiLeftStr、AnsiRightStr、AnsiMidStr、AnsiContainsStr、AnsiContainsText、AnsiStartsStr、AnsiStartsText、AnsiEndsStr、AnsiEndsText、AnsiReplaceStr、AnsiReplaceText、AnsiResemblesText...
引用单元 StrUtils 非 SysUtilsAnsiLeftStr.AnsiRightStr.AnsiMidStr.AnsiContainsStr.AnsiContainsText.AnsiSta ...