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' }],
})
相关推荐
sjd_积跬步至千里5 分钟前
CSS实现文字横向无限滚动效果
前端
维他AD钙6 分钟前
前端基础避坑:3 个实用知识点的简单用法
前端
journs8 分钟前
micro-app微前端styled-components CSSOM模式 应用切换样式丢失问题
前端
呼啦啦小魔仙8 分钟前
elpis项目DSL设计分享
前端
李李记9 分钟前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
来金德瑞9 分钟前
快速掌握 ProseMirror 的核心概念
前端
ygria13 分钟前
样式工程化:如何实现Design System
前端·前端框架·前端工程化
墨渊君2 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
huabuyu2 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z2 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html