En los últimos días, el blogger ha encontrado la necesidad de hacer que la tabla de iview sea editable. Este blogger ya se dio cuenta en el último blog. Si quieres saber, puedes ir al último blog. Mi blog es principalmente para dar Permítanme compartir con ustedes cómo dar un valor predeterminado cuando el usuario es descuidado y no lo ingresa.
Permítame mostrarle primero la información de datos de mis objetos relacionados.
Esta es una matriz ordinaria de datos y una matriz de
filas de datos . Con los datos de la columna,
muestro los datos de este objeto para que todos lo entiendan:
/**
* 编辑单元格数据
*/
editCellData(row, column, index) {
this.selectedCell.rowIndex = index;
this.selectedCell.columnIndex = column.slot;
},
¡Este es un clic para editar los datos correspondientes pasados!
Luego ingrese el tema:
Proporciono tres métodos para usted aquí:
1. La forma más fácil de asignarlos a 0 (no escribiré en detalle en este método, creo que todos lo harán)
2. Método de asignación dividida, de hecho, este método se basa en el método anterior para hacer ciertas mejoras
for (let index = 0; index < this.tableData.length; index++) {
const element = this.tableData[index];
if (this.tableData[index].pfysje == '' || this.tableData[index].pfysje == null) {
this.tableData[index].pfysje = 0
}
if (this.tableData[index].ysje == '' || this.tableData[index].ysje == null) {
this.tableData[index].ysje = 0
}
if (this.tableData[index].wcgcl == '' || this.tableData[index].wcgcl == null) {
this.tableData[index].wcgcl = 0
}
if (this.tableData[index].bfje == '' || this.tableData[index].bfje == null) {
this.tableData[index].bfje = 0
}
}
Aquí un uso inteligente de un bucle para ordenar las columnas y luego juzgar, este método es controlar la cantidad de código, ¡y no hay otro beneficio!
3. Uso inteligente de los rangos para localizar elementos específicos para el procesamiento.
¡Este método usará las propiedades de fila y columna del objeto selectedCell sobre mí! let columnData = this.selectedCell.columnIndex;
let rowData = this.selectedCell.rowIndex;
if (this.tableData[rowData][columnData] == null || this.tableData[rowData][columnData] == '') {
this.tableData[rowData][columnData] = 0;
}
Defina valores específicos a través de filas y columnas, y luego podrá ubicar datos específicos que se editarán a través de los valores, para juzgar que los datos están vacíos. Si está vacío, asigne una operación de valor predeterminado. ¿Es este método perfecto? ¡Optimizado!
De hecho, el uso de render también puede lograr esta función, pero no es aplicable a mi componente funcional, te daré una idea aquí:
{
title: 'Age',
key: 'age',
render:(h,params)=>{
if(params.row.age ==null || params.row.age ==''){
return h('td',{
style:{
borderRight:'none'
}
},0);
}else{
return h('td',{
style:{
borderRight:'none',
textAlign: 'center'
}
},params.row.age)
}
}
},
Eliminé el borde derecho aquí porque este td tendrá el borde derecho y luego se superpondrá. Este renderizado puede implementar la operación de valor predeterminado. También puede intentarlo. Si no necesita cambiar el valor en su tabla, solo tema Después de extraer el valor nulo de la interfaz y realizar dicho procesamiento, creo que este render es más conveniente. ¿Qué método eligen ustedes?
