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();
    }
  });
};
相关推荐
liu****1 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San301 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
芒果茶叶2 小时前
并行SSR,SSR并行加载
前端·javascript·架构
用户785127814703 小时前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js
威风的虫3 小时前
JavaScript中的axios
开发语言·javascript·ecmascript
bot5556663 小时前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试
西洼工作室3 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
曦曜2924 小时前
富文本编辑器
javascript
多啦C梦a4 小时前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js
zhangzelin8884 小时前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript