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' }],
})
相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
古月-一个C++方向的小白4 小时前
C++11之lambda表达式与包装器
开发语言·c++
天天进步20154 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
沐知全栈开发5 小时前
Eclipse 生成 jar 包
开发语言
呼啦啦呼啦啦啦啦啦啦5 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
杭州杭州杭州6 小时前
Python笔记
开发语言·笔记·python
tanyongxi666 小时前
C++ AVL树实现详解:平衡二叉搜索树的原理与代码实现
开发语言·c++
拾光拾趣录7 小时前
括号生成算法
前端·算法
阿葱(聪)7 小时前
java 在k8s中的部署流程
java·开发语言·docker·kubernetes
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化