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
                        }
                    },
                ],