Highlight-row puede agregar un estilo de selección, y el estilo seleccionado aparecerá después de seleccionar una fila determinada
this.tableData[0]["_highlight"] = true; Puede definir qué fila se selecciona, 0 significa que es la primera fila
Controle la visualización de los encabezados de las tablas: atributo show-header: show-header="false"
Use renderHeader en columnas para personalizar el valor de retorno del encabezado del título
renderHeader:(h, params)=>{ //Esto se agrega al encabezado que necesita un cuadro de búsqueda
return h('div',[
params.column.title,
h('i-input',{ props:{ clearable : true, size:'small' }, style:{ marginLeft:'10px', width:'100px' }, on:{ 'on-change':(evento)=>{ //El evento personalizado de iview en render usa comillas
esta.palabra clave = evento.objetivo.valor
}
}
})
])
}
Escuche la variable de palabra clave y ejecute el método personalizado test()
ver:{ palabra clave(){ this.search() } }, métodos:{ test(){ if(this.keyword != null){ var list = []; this.data.forEach((item)=>{ if(item.title.toLowerCase().search(this.keyword.toLowerCase()) !== -1){ //Esto está escrito para no distinguir la lista de casos en inglés.push(item) } }) this. msgData = list //Para mantener los datos de origen de this.data, usamos msgData para guardar y buscar, use } else{ this.msgData = this.data in <Table :data="msgData"> //La búsqueda la palabra clave está vacía restaurar datos de origen }
}
},