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();
    }
  });
};
相关推荐
阳火锅几秒前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水39 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
Winwin41 分钟前
js基础-数据类型
javascript
Winwin42 分钟前
哈?Boolean能作为回调函数?
javascript
我麻烦大了42 分钟前
实现一个简单的Vue响应式
前端·vue.js
Shartin1 小时前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式
独立开阀者_FwtCoder1 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
dme.1 小时前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo1 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记