Vue + Element 表格：采购数量为0时弹出提示框

<p>&quot;<template>\n  <div>\n    &lt;el-table :data=&quot;tableData&quot;&gt;\n      &lt;el-table-column prop=&quot;name&quot; label=&quot;名称&quot;&gt;\n      </el-table-column>\n      &lt;el-table-column prop=&quot;purchaseQuantity&quot; label=&quot;采购数量&quot;&gt;\n        &lt;template slot-scope=&quot;scope&quot;&gt;\n          &lt;el-input v-model=&quot;scope.row.purchaseQuantity&quot; @change=&quot;checkPurchaseQuantity(scope.row)&quot;&gt;\n          </el-input>\n        </template>\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n export default {\n  data() {\n    return {\n      tableData: [\n        { name: &quot;商品A&quot;, purchaseQuantity: 0 },\n        { name: &quot;商品B&quot;, purchaseQuantity: 0 },\n        { name: &quot;商品C&quot;, purchaseQuantity: 0 }\n      ]\n    };\n  },\n  methods: {\n    checkPurchaseQuantity(row) {\n      if (row.purchaseQuantity === 0) {\n        this.$confirm(&quot;采购数量不能为零&quot;, &quot;提示&quot;, {\n          confirmButtonText: &quot;确定&quot;,\n          type: &quot;warning&quot;\n        });\n      }\n    }\n  }\n};\n</script>\n&quot; 在上面的代码中，tableData 是存储表格数据的数组，其中每个对象包含商品的名称和采购数量。checkPurchaseQuantity 方法用于检查采购数量是否为 0，并通过 this.$confirm 方法弹出提示框。需要注意的是，this.$confirm 方法返回一个 Promise 对象，可以通过 .then 方法来处理用户点击确定按钮后的逻辑。这样，当在表格中输入采购数量为 0 时，就会弹出提示框提示用户采购数量不能为零。</p>