el-table、el-form、el-input嵌套使用表单校验

最新推荐文章于 2024-03-13 11:08:16 发布

你吃不饱就好

最新推荐文章于 2024-03-13 11:08:16 发布

阅读量1.5k

点赞数

文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/qq_35147012/article/details/117445777

版权

需求

从后台获取表格数据，表格中有输入框，每个输入框都要有校验。

效果图

在这里插入图片描述

代码

html:el-form的model绑定paramsList，el-form-item的prop绑定'watchList.' + scope.$index + '.takeNum'，第一行的el-form-item绑定的值就是paramsList.watchList[0].takeNum

	  <el-form ref="paramsList" :model="paramsList">
        <el-table :data="paramsList.watchList" border style="width: 100%">
          <el-table-column prop="sampleName" label="样品名称" width="180">
          </el-table-column>
          <el-table-column prop="sampleLot" label="批号" width="150">
          </el-table-column>
          <el-table-column prop="lastNum" label="剩余数量" width="80">
          </el-table-column>
          <el-table-column prop="takeNum" label="调出数量" width="80">
            <template slot-scope="scope">
                <el-form-item
                  :prop="'watchList.' + scope.$index + '.takeNum'"
                  :rules="{
                    required: true,
                    message: 'Required',
                    trigger: 'blur',
                  }"
                >
                  <el-input-number
                    style="width: 100%"
                    v-model="scope.row.takeNum"
                    :controls="false"
                    :min="0"
                    :max="scope.row.lastNum"
                  ></el-input-number>
                </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

js:因为el-form的model只能接收对象，所以需要在表格数组外面嵌套一层

paramsList:{
        watchList: [{ sampleName: 1, sampleLot: 1, lastNum: 23 },{ sampleName: 1, sampleLot: 1, lastNum: 23 }],
      },