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' }],
})
相关推荐
Jerry3 分钟前
使用 Material 3 在 Compose 中设置主题
前端
耶啵奶膘9 分钟前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹10 分钟前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
看海天一色听风起雨落16 分钟前
Python学习之装饰器
开发语言·python·学习
Want59521 分钟前
C/C++圣诞树①
c语言·开发语言·c++
生擒小朵拉25 分钟前
STM32添加库函数
java·javascript·stm32
老赵的博客32 分钟前
c++ 杂记
开发语言·c++
jimmy.hua35 分钟前
[C++刷怪笼]:set/map--优质且易操作的容器
开发语言·c++
tuokuac39 分钟前
nginx配置前端请求转发到指定的后端ip
前端·tcp/ip·nginx
程序员爱钓鱼43 分钟前
Go语言实战案例-开发一个Markdown转HTML工具
前端·后端·go