vue + element 表格中填写采购数量为0时提交跳出提示框:采购数量不能为零
在Vue.js和Element中,可以通过监听表格中的数据变化来实现采购数量为0时的提示框。
首先,在表格的数据中添加一个变量purchaseQuantity用于存储采购数量。然后,在表格中的输入框中使用v-model指令绑定purchaseQuantity,这样当输入框中的值发生变化时,purchaseQuantity的值也会相应地更新。
接下来,使用watch属性监听purchaseQuantity的变化。当purchaseQuantity的值为0时,弹出一个提示框。可以使用Element的MessageBox组件来实现提示框的弹出。
具体代码如下所示:
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="purchaseQuantity" label="采购数量">
<template slot-scope="scope">
<el-input v-model="scope.row.purchaseQuantity" @change="checkPurchaseQuantity(scope.row)"></el-input>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '商品A', purchaseQuantity: 0 },
{ name: '商品B', purchaseQuantity: 0 },
{ name: '商品C', purchaseQuantity: 0 }
]
};
},
methods: {
checkPurchaseQuantity(row) {
if (row.purchaseQuantity === 0) {
this.$confirm('采购数量不能为零', '提示', {
confirmButtonText: '确定',
type: 'warning'
});
}
}
}
};
</script>
在上面的代码中,tableData是存储表格数据的数组,其中每个对象包含商品的名称和采购数量。checkPurchaseQuantity方法用于检查采购数量是否为0,并通过this.$confirm方法弹出提示框。
需要注意的是,this.$confirm方法返回一个Promise对象,可以通过.then方法来处理用户点击确定按钮后的逻辑。
这样,当在表格中输入采购数量为0时,就会弹出提示框提示用户采购数量不能为零
原文地址: http://www.cveoy.top/t/topic/izar 著作权归作者所有。请勿转载和采集!