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