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. 上面的两种方法效果都是一样的: 增加自定义事件: 结果: 自信是进步的源泉. 继续加油. ^_^
随机推荐
- PHP多选测试练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 笔记70 Spring Boot快速入门(八)(重要)
上传文件 一.方式一 1.上传页面 upLoadPage.html <!DOCTYPE html> <html lang="en"> <head> ...
- ambari安装hadoop
前言 hadoop除了社区版之外,还有两个主流的分支,一个是cdh版本,一个是hdp版本,其中ambari是hdp版本的部署工具 1.ambari安装准备 https://docs.hortonwor ...
- OpenCV常用基本处理函数(7)图像金字塔和直方图
高斯金字塔 高斯金字塔的顶部是通过将底部图像中的连续的行和列去除得到的.顶部图像中的每个像素值等于下一层图像中 5 个像素的高斯加权平均值. 这样操作一次一个 MxN 的图像就变成了一个 M/2xN/ ...
- Git分支,合并,切换分支的使用
1.创建合并分支 在我们每次的提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD指针严格来说不是指向提交 ...
- security 页面测试
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- MAT内存分析
先下载 http://www.eclipse.org/mat/downloads.php 配置环境参数 分析一个堆转储文件需要消耗很多的堆空间,为了保证分析的效率和性能,在有条件的情况下,建议分配给 ...
- 为什么不能在shell脚本中执行source /etc/profile或者source ~/.bashrc问题?
执行脚本时,其中的命令是在一个子shell中执行的.子shell继承了父shell的环境变量,但无法修改他们,或者说所做的修改仅对子shell有效.
- Service系统服务(二):补充应用技巧、软连接与硬连接、man手册、zip备份、vim效率操作、自定义yum软件仓库、发布及测试yum仓库、编译安装软件包
一.补充应用技巧 目标: 本例要求掌握在运维中比较常用的一些扩展命令技巧的使用,完成下列小技巧操作: 1> 采用数值形式将目录/root的权限调整为 rwx------ 2> 将记录的 ...
- AcWing 228. 异或 (dfs+线性基)打卡
题目:https://www.acwing.com/problem/content/230/ 题意:有一个图,每条边有一个权值,现在求1-n的一条路径的最大异或和,一条边能经过多次,相应的也要计算那么 ...