from表单el-form-item绑定值为数组的prop写法

最新推荐文章于 2024-04-30 10:58:07 发布

我吴六六

最新推荐文章于 2024-04-30 10:58:07 发布

阅读量2.5k

点赞数 2

分类专栏： prop 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41008008/article/details/127848920

版权

prop 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html部分

如下代码，prop绑定值理想写法应为list[groupIndex].name,但在这需要list.[groupIndex].name才能绑定成功

<el-form ref="form" :model="form">
    <el-form-item v-for="(item,groupIndex) in form.list" :key="groupIndex" :label="'组'+(groupIndex+1)+'：'" label-width="150px">
      <el-row>
        <el-col :span="9">
          <el-form-item :prop="'list.'+groupIndex+'.name'" :rules="[{ validator: checkFood, trigger: 'change' }]">
            <el-select v-model="form.list[groupIndex].name" placeholder="请选择食物" clearable>
              <el-option
                v-for="(food,foodIndex) in ['番茄炒蛋','青椒炒肉','烧鸭','猪脚']"
                :key="foodIndex"
                :label="food"
                :value="food"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="4">
          <el-form-item :prop="'list.'+groupIndex+'.num'" :rules="[{ validator: checkNum, trigger: 'change' }]">
            <el-select v-model.number="form.list[groupIndex].num" placeholder="请选择数量" clearable>
              <el-option v-for="num in [1,2,3,4]" :key="num" :label="num" :value="num" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
  </el-form>

js部分

<script>
export default {
  data() {
    return {
      form: {
        list: [{
          'name': '',
          'num': null
        },
        {
          'name': '',
          'num': null
        },
        {
          'name': '',
          'num': null
        },
        {
          'name': '',
          'num': null
        }]
      },
      checkFood: (rule, value, callback) => {
        const arr = rule.field.split('.')// field: prop的值,list.0.name
        if (!value && !this.form.list[arr[1]]['num']) { // 两个值都为空
          this.$refs.form.clearValidate(arr[0] + '.' + arr[1] + '.' + 'num')
          callback()
        } else if (!value && this.form.list[arr[1]]['num']) {
          callback(new Error('请选择食物数量'))
        } else {
          callback()
        }
      },
      checkNum: (rule, value, callback) => {
        const arr = rule.field.split('.')
        if (!value && !this.form.list[arr[1]]['name']) {
          this.$refs.form.clearValidate(arr[0] + '.' + arr[1] + '.' + 'name')
          callback()
        } else if (!value && this.form.list[arr[1]]['name']) {
          callback(new Error('请选择食物'))
        } else if (this.accout > 4) {
          callback(new Error('数量总和不大于4'))
        } else {
          callback()
        }
      }
    }
  }
}
</script>