iView表格(Table)表头添加模糊搜索框

highlight-row可以添加选择样式，选择某一行后会出现被选中样式

this.tableData[0]["_highlight"] = true;可以定义哪一行被选中，0代表是第一行

控制表格表头的显示：show-header 属性    :show-header="false"

columns中使用renderHeader对标题头进行自定义返回值

renderHeader:(h, params)=>{ //这个加在需要有搜索框的表头
                        return h('div',[
                            params.column.title,
                            h('i-input',{
                                props:{
                                    clearable:true,
                                    size:'small'
                                },
                                style:{
                                    marginLeft:'10px',
                                    width:'100px'
                                },
                                on:{
                                    'on-change':(event)=>{ //render里iview的自定义事件用引号
                                        this.keyword = event.target.value
                                    }
                                }
                            })
                        ])
                    }

监听keyword这个变量，执行自定义方法test()方法

 watch:{
        keyword(){
            this.search()
        }
    },
    methods:{
        test(){
            if(this.keyword != null){
                var list = [];
                this.data.forEach((item)=>{
                    if(item.title.toLowerCase().search(this.keyword.toLowerCase()) !== -1){ //这么写是为了不区分英文大小写
                        list.push(item)
                    }
                }) 
                this.msgData = list  //为了保留this.data源数据，我们用msgData来存搜素搜索，在<Table :data="msgData">使用
            }else{
                this.msgData = this.data //搜索关键字为空就恢复源数据
            }
        }
    },