iview 的table组件，自带过滤功能
2024-09-06 23:57:43
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
}
},
],
最新文章
- centos下彻底删除 和重装MYSQL
- Linux httpd源码编译安装
- List.Foreach与C#的foreach的区别
- [Linux] LD_LIBRARY_PATH
- iOS9 HTTP传输安全
- 希望早几年知道的5个Unix命令
- @version ||= version
- 10 款精美的 CSS3 全新特效
- C++ 我想这样用（七）
- 以不同用户身份运行程序，/savecred只需要输入一次密码（GetTokenByName取得EXPLORER.EXE的令牌，然后调用CreateProcessAsUser，而且使用LoadUserProfile解决另存文件的问题）good
- What's New in C# 6.0(转)
- 如何在工程中使用axis2部署webservice
- MySQL 中 having 和 where 的区别
- solr与Elasticsearch对比
- Yarn集群的搭建、Yarn的架构和WordCount程序在集群提交方式
- JAVA第3，4课（内容合并）
- JAVA执行远端服务器的脚本
- java service 安装
- ceph mimic版本 部署安装
- Fantacy团队周一站立会议