Vue3+Element Plus 实现table表格中input的验证

实现效果

html部分

javascript 复制代码
<template>
  <div class="table">
    <el-form ref="tableFormRef" :model="form">
      <el-table :data="form.detailList">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="物资编号" align="center" prop="materialNo" />
        <el-table-column label="入库数量" align="center" prop="quantity" width="160">
          <template #default="scope">
            <el-form-item :prop="'detailList['+scope.$index+'].quantity'" :rules="tableFormRules.quantity">
              <el-input-number v-model="scope.row.quantity" placeholder="入库数量" :min="1" size="small"
                               :max="2147483647"></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="所属仓库" align="center" width="180">
          <template #default="scope">
            <el-form-item :prop="'detailList['+scope.$index+'].warehouseType'"
                          :rules="tableFormRules.warehouseType">
              <el-select v-model="scope.row.warehouseType" placeholder="请选择所属仓库">
                <el-option
                  v-for="dict in la_work_area"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="金额" align="center" width="160">
          <template #default="scope">
            <el-form-item :prop="'detailList['+scope.$index+'].money'" :rules="tableFormRules.money">
              <el-input-number v-model="scope.row.money" :precision="2" @change="changeMoney" size="small"
                               :min="0" placeholder="请输入金额"></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
  <div class="tc mt16">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="submitForm" type="primary" color="#67C23A">提交</el-button>
   </div>
</template>

数据部分

javascript 复制代码
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const buttonLoading = ref(false);
const tableFormRef = ref<ElFormInstance>();
const tableFormRules = reactive({
  quantity: [
    { required: true, message: "请输入数量", trigger: "change" }
  ],
  warehouseType: [
    { required: true, message: "请选择所属仓库", trigger: "change" }
  ],
  money: [
    { required: true, message: "请输入金额", trigger: "change" }
  ]
});


/** 提交按钮 */
const submitForm = () => {
 tableFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      //处理自己的业务逻辑
      proxy?.$modal.msgSuccess("操作成功");
      cancel();
    }
  });
};
相关推荐
浮桥1 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥1 小时前
Vue框架之钩子函数详解
vue.js
四季豆豆豆2 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
晓13132 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
海底火旺3 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
前端付豪3 小时前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构
aPurpleBerry3 小时前
hot100 hot75 栈、队列题目思路
javascript·算法
颜漠笑年3 小时前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript
拾光拾趣录3 小时前
Vue中v-if与v-for同元素使用的陷阱
前端·vue.js
脑袋大大的4 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发