This article is still another way to improve the style of the
previous blog post.The last article wrote about the need to click the last column corresponding to the current row behind the previous box to become the input box to achieve the editable state of the table, and then Put the objects in this column into a new array.If you uncheck it, of course, you need to remove the modified value and change it to the original value, and then pass the object of the new array to the background to submit the operation. It is the render method. Today I will give you a science popularization method using slot slots.
By the way, let me mention why you should change to this method of using slots: bloggers who have seen my previous blog post should have noticed that I matched before clicking. The method of loop matching is used.Although this method can achieve the effect, it is not effective.Once the amount of data reaches a certain amount, it will be cycled multiple times, which makes the speed slower. All problems can be solved directly by getting the corresponding index, so I still take the old routine of slot slot! I don't explain the above code much:
<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)));
},
