el-form 多层嵌套数据 rules

305 阅读1分钟
    <el-form
      :rules="rules"
      :model="editForm"
      ref="editForm"
      class="order-form"
      status-icon
      label-position="left"
    >
       <el-form-item prop="proposer.cooperatorId" label="申请方:">  // 这里
        <el-select
          style="width: 60%"
          v-model="editForm.proposer.cooperatorId"
          filterable
          @focus="handleFocus('proposer')"
          remote
          :remote-method="
            (query) => {
              handleRemote(query, 'proposer');
            }
          "
          v-el-select-loadmore="() => loadmoreOptions('proposer')"
        >
          <el-option
            v-for="type in proposerOptions"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          />
        </el-select>
      </el-form-item>
      </el-form>

      rules: {
        datetimerange: [{ required: true, message: "请选择日期", trigger: "change" }],
        "proposer.cooperatorId": [ // 这里
          { required: true, message: "请选择申请方", trigger: "change" },
        ],
        "provider.cooperatorId": [
          { required: true, message: "请选择服务方", trigger: "change" },
        ],
      },