zoukankan      html  css  js  c++  java
  • 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
                            }
                        },
                    ],
  • 相关阅读:
    Jupyter notebook 读取文件的问题
    机器学习-数据清洗和特征选择
    机器学习-逻辑回归
    Java教程
    13.并发编程
    redis 实现
    CyclicBarrier介绍
    Future模式衍生出来的更高级的应用
    并发编程 futuretask
    整理POST请求方式
  • 原文地址:https://www.cnblogs.com/panax/p/11112281.html
Copyright © 2011-2022 走看看