Este artículo es otra forma de mejorar el estilo de la
publicación de blog anterior. El último artículo escribió sobre la necesidad de hacer clic en la última columna correspondiente a la fila actual detrás del cuadro anterior para convertirse en el cuadro de entrada para lograr el estado editable de la tabla, y luego Coloque los objetos en esta columna en una nueva matriz. Si lo desmarca, por supuesto, debe eliminar el valor modificado y cambiarlo al valor original, y luego pasar el objeto de la nueva matriz al fondo para enviar la operación. Es el método de renderizado. Hoy te daré un método de divulgación científica usando slots de tragamonedas.
Por cierto, permíteme mencionar por qué deberías cambiar a este método de usar slots: los bloggers que han visto mi anterior publicación de blog deberían haber notado que coincidí antes de hacer clic. Se utiliza el método de correspondencia de bucles. Aunque este método puede lograr el efecto, no es efectivo. Una vez que la cantidad de datos alcanza una cierta cantidad, se reciclará varias veces, lo que hace que la velocidad sea más lenta. Todos los problemas se pueden resolver directamente obteniendo el índice correspondiente, ¡así que todavía tomo la vieja rutina de ranura de ranura! No explico mucho el código anterior:
<Table ref="registerTable" :width="contentWidth" :max-height="contentHeight-170" :columns="tableColumns" :data="tableData">
<template slot-scope="{ index }" slot="Checkbox">
<Checkbox v-model="tableData[index]._isChecked" @on-change="selectRowCancel(index)"></Checkbox>
</template>
<template slot-scope="{ row,index }" slot="jymj">
<div v-if="tableData[index]._isChecked" style="position: relative;">
<InputNumber v-model="tableData[index].jymj" :class="{'error-input':(!tableData[index].jymj && tableData[index].jymj != 0) || (tableData[index].jymj > tableData[index].kjymj) && showTableJymjRules}"/>
<div v-show="tableData[index].jymj>tableData[index].kjymj && showTableJymjRules" class="error-tip"><span>交易面积不能大于可交易面积</span></div>
<div v-show="tableData[index].jymj == 0 && showTableJymjRules" class="error-tip"><span>交易面积不能为0</span></div>
<div v-show="!tableData[index].jymj && tableData[index].jymj != 0 && showTableJymjRules" class="error-tip"><span>交易面积不能为空</span></div>
</div>
<div v-else>
<span>{{ row.jymj }}</span>
</div>
</template>
</Table>
tableColumns: [{
title: ' ',
slot: 'Checkbox',
width: 60
},
{
title: '交易面积/亩',
slot: 'jymj',
minWidth: 140
}
],
/**
* 表格取消选择
*/
selectRowCancel(index) {
if (!this.tableData[index]._isChecked) { //当取消勾选
this.tableData[index].jymj = 0
}
},
/**
* return 表格选择的所有行的值的数组
*/
getSelection() {
let selectionIndexes = [];
for (let i in this.tableData) {
if (this.tableData[i]._isChecked) selectionIndexes.push(parseInt(i));
}
return JSON.parse(JSON.stringify(this.tableData.filter((data, index) => selectionIndexes.indexOf(index) > -1)));
},
