element-plus中在表格校验输入的值

element-plus中在表格校验输入的值

效果:

注意事项:需要在表单套一个表格的字段

代码:

html 复制代码
<el-form :model="tableFrom" ref="tableDataRef" :rules="rules" style="margin: 0px !important;">
          <el-table class="review-table" :data="tableFrom.tableData" style="width: 100%;">
            <el-table-column prop="name" label="描述" min-width="140" />
            <el-table-column prop="defaultScore" label="分值" header-align="center" align="center" />
            <el-table-column prop="score" label="得分"  >
              <template #default="scope">
                <el-form-item :prop="'tableData[' + scope.$index + '].score'" :rules="rules.score" style="margin-bottom: 0px !important;">
                  <el-input
                    style="width: 70px"
                    placeholder="得分"
                    v-model="tableFrom.tableData[scope.$index].score"
                    type="number"
                    min="0"
                    :max="scope.row.defaultScore"
                  />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
js 复制代码
const tableFrom = ref({
  tableData:[]
});


const rules = reactive({
  score: [{ required: true, message: '得分不能为空', trigger: 'blur' }],
})
相关推荐
陈随易几秒前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma774 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在4 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang8 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
linux kernel8 分钟前
第七讲:C++中的string类
开发语言·c++
闲蛋小超人笑嘻嘻9 分钟前
前端面试十一之TS
前端
摆烂为不摆烂9 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead22 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
玩代码22 分钟前
Java线程池原理概述
java·开发语言·线程池
嘉琪00125 分钟前
封装一个有最小化的dialog组件
前端·javascript·css