el-form checks multiple drop-down boxes

When using the el-form component, sometimes three drop-down boxes are used in one el-form-item, and they all need to be verified.

Code:
template

    <el-form
        :model="form"
        :rules="rules"
        ref="form"
      >
          <el-form-item
            label="地址:"
            prop="address"
          >
            <div>
        
                <el-select
                  v-model="form.areaCode"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in selectArea"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="form.streetCode"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in selectStreet"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
           
              <el-input
                v-model="form.detail"
                placeholder="请输入"
              ></el-input>
            </div>
          </el-form-item>
            </el-form>

data

  data() {
    
    
    var addressRule = (rule, value, callback) => {
    
    
      var _this = this;
      if (
        !_this.form.areaCode ||
        !_this.form.streetCode ||
        !_this.form.detail
      ) {
    
    
        return callback(new Error("请填写地址"));
      } else {
    
    
        callback();
      }
    };
    return {
    
    
      rules: {
    
    
        address: [{
    
     required: true, validator: addressRule, trigger: "blur" }],
      },
     
    };
  },