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' }],
})
相关推荐
LHX sir7 分钟前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web
香菜+7 分钟前
python脚本加密之pyarmor
开发语言·python
Gazer_S15 分钟前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js
数据知道17 分钟前
Go基础:一文掌握Go语言泛型的使用
开发语言·后端·golang·go语言
小光学长28 分钟前
基于Vue的图书馆座位预约系统6emrqhc8(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
啃啃大瓜29 分钟前
常用库函数
开发语言·python
笑口常开xpr34 分钟前
【C++继承】深入浅出C++继承机制
开发语言·数据结构·c++·算法
Y学院38 分钟前
vue的组件通信
前端·javascript·vue.js
患得患失94939 分钟前
【ThreeJs】【伪VR】用 Three.js 实现伪 VR 全景看房系统:低成本实现 3D 级交互体验
javascript·3d·vr
PairsNightRain42 分钟前
React Concurrent Mode 是什么?怎么使用?
前端·react.js·前端框架