vue.js iview 的table组件，自带过滤功能

最新推荐文章于 2024-04-02 09:44:36 发布

原创最新推荐文章于 2024-04-02 09:44:36 发布 · 915 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js iview 的table组件，自带过滤功能

方法一：

代码如下：

<template>
    <div>
      <Table :columns="people" :data="scores"></Table>  
    </div>
</template>
<script>
  export default {
    data(){
        return{
            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',
                        render: (h,params) => { // 根据条件判断内容重写
                            console.log(params.row.examScore)
                            switch(params.row.examScore){
                                case 'Over_Line':
                                return  h('span','60分以上')
                                case 'Not_Over_Line':
                                return  h('span','60分以下')
                            }
                        },
                        filters: [
                            {
                                label: '60分以上',
                                value: "Over_Line"
                            },
                            {
                                label: '60分以下',
                                value: "Not_Over_Line"
                            }
                        ],
                         filterMethod (value, row) { // 过滤方法
                            return row.examScore.indexOf(value) > -1           
                        }
                    },
                    { 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.finishDate.indexOf(value) > -1
                        }
                    },
                ],
                scores:[
                    { examineeName:"123",examNum:1,resultState:"EXAM_PASS",examScore: "Over_Line",finishDate:"2018-8-11"},
                    { examineeName:"456",examNum:2,resultState:"EXAM_FLUNK",examScore: "Not_Over_Line",finishDate:"2018-8-21"},
                    { examineeName:"789",examNum:3,resultState:"EXAM_NO",examScore: "Not_Over_Line",finishDate:"2018-8-21"}
                ]
        }
    },
    methods:{

    },
    created(){
        
    }
  }
  </script>