关于v-for循环el-form-item后prop的绑定方式

835 阅读1分钟
  <div v-for="(time,index) in form.checkedTimeList" :key="index">
        <el-form-item label="价格" :prop="'checkedTimeList.' + index + '.price'" :rules="priceRules">
            <el-input v-model="time.price" type="number" placeholder="价格" clearable />
        </el-form-item>
        <el-form-item label="数量" :prop="'checkedTimeList.' + index + '.total'" :rules="customTimeRules">
            <el-input v-model="time.total" type="number" placeholder="数量" clearable :disabled="time.totalFlag"/>
        </el-form-item>
        <el-form-item prop="totalFlag">
            <el-checkbox v-model="time.totalFlag">不限量</el-checkbox>
        </el-form-item>
    </div>

注意:循环的checkedTimeList必须要定义在el-form绑定的:mode="form"的form对象里面,否则绑定的prop会因为找不到对应的属性而报错。

<el-form ref="form" :model="form" inline label-width="100px">

data(){
    return {
        form: {
            checkedTimeList: []
        }
    }
}