element + vue Table里的两列数据比大小

element + vue Table里的两列数据比大小_第1张图片

<el-form-item label="库存选择:" prop="tables">
                            <el-button type="text" size="medium" @click="selectGoods">选择库存</el-button><br />
                            <el-col :span="24">
                                <el-table :data="detail.tables" v-show="detail.tables.length > 0" border
                                    max-height="300px">
                                    <el-table-column v-for="item in WorkingAreaCheckOutTableHeadsAdd" :key="item.prop"
                                        :label="item.label" :prop="item.prop" align="center" :width="item.width">
                                        <template slot-scope="scope">
                                            <span v-if="item.type">
                                                {{InventoryTypeQueryData[scope.row.type]}}
                                            </span>
                                            <span v-else-if="item.storageMode">
                                                <span>{{ whAStyleData[scope.row.storageMode] }}</span>
                                            </span>
                                            <span v-else-if="item.containerType">
                                                <span>{{ CONTAINER_TYPE[scope.row.containerType] }}</span>
                                            </span>
                                            <span v-else>{{ scope.row[item.prop] }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="num" label="出库数量" align="center" width="100">
                                        <template slot-scope="scope">
                                            <el-form-item :prop="`tables[${scope.$index}].num`"
                                                :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
                                                <el-input v-model="scope.row.num" clearable size="small"
                                                    oninput="value=value.replace(/[^0-9]/g,'');if(String(value)==='0'){value=1}"
                                                    @input="onExchange(scope.$index)"></el-input>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" align="center" fixed="right">
                                        <el-link type="danger" :underline="false" slot-scope="{ row, $index }" plain
                                            @click="handleClickDelCity(row, $index)">删除</el-link>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-form-item>
  //出库数量失焦
  //通过index获取到中转区数量,出库数量,然后进行比较,如果出库数量大于中转区数量,则提示,并把出库数量始化为中转区数量。
            onExchange(index) {
                let moment = this.detail.tables[index]; // 此处的tableData为自己的table表格绑定的data数组
                let inventoryNum = Number(moment.inventoryNum);
                let num = Number(moment.num);
                if (num > inventoryNum) {
                    this.detail.tables[index].num = inventoryNum;
                    this.$set(this.detail.tables, index, moment);
                    this.$message.error("出库数量不能大于中转区数量!");
                    // 此处是将修改的那一行的数据重新赋值给table表格对应的那一行,触发热更新。
                }
            },

你可能感兴趣的:(element,vue.js,javascript,前端)