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

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="quantity" label="采购数量">
        <template slot-scope="scope">
          <el-input v-model="scope.row.quantity" @blur="checkQuantity(scope.row)"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="submit">提交</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { name: '商品1', quantity: 0 },
        { name: '商品2', quantity: 5 },
        { name: '商品3', quantity: 10 }
      ]
    };
  },
  methods: {
    checkQuantity(row) {
      if (row.quantity === 0) {
        this.$message.error('采购数量不能为零');
      }
    },
    submit() {
      // 在此处执行提交操作
    }
  }
};
</script>
<p>在上述代码中，通过监听 <code>&lt;el-input&gt;</code> 组件的 <code>blur</code> 事件，即当输入框失去焦点时触发 <code>checkQuantity</code> 方法。在该方法中，判断 <code>row.quantity</code> 是否为零，如果是零，则使用 Element UI 的 <code>$message</code> 方法弹出错误提示框。</p>
<p>另外，在提交按钮的点击事件处理函数 <code>submit</code> 中，可以执行实际的提交操作。根据具体需求，可以在提交前再次检查采购数量是否为零，或者对其他数据进行校验。</p>