// 表單校驗(yàn)
    verifyForm() {
      this.$refs.basicInfoRule.validate(valid => {
        if (valid) {
          // 校驗(yàn)通過執(zhí)行的邏輯
        } else {
          // 校驗(yàn)不通過自動(dòng)定位到不通過的表單項(xiàng)
          this.moveToErr()
        }
      })
    },
    // 自動(dòng)定位到表單報(bào)錯(cuò)項(xiàng)
    moveToErr() {
      this.$nextTick(() => {
        let isError = document.getElementsByClassName('is-error')
        if (isError.length) {
          isError[0].scrollIntoView({
            block: 'center',
            behavior: 'smooth'
          })
	// 這個(gè)當(dāng)滑動(dòng)到報(bào)錯(cuò)項(xiàng)之后自動(dòng)獲取輸入框的焦點(diǎn)，方便用戶直接進(jìn)行輸入，延遲 800ms 是因?yàn)樾枰寄艿蕉ㄎ怀晒笤谶M(jìn)行獲取焦點(diǎn)體驗(yàn)更好一些
          setTimeout(() => {
            if (isError[0].previousElementSibling.querySelector('input')) {
              isError[0].previousElementSibling.querySelector('input').focus()
            }
          }, 800)
        }
      })
    }

   <el-form-item label="姓名：" prop="name" ref="name">
        <el-input
          v-model.number="form."
          placeholder="請(qǐng)輸入姓名"
          clearable
        ></el-input>
      </el-form-item>

 verifyForm() {
      this.$refs.ruleForm.validate((valid, object) => {
        if (valid) {
          //校驗(yàn)通過執(zhí)行邏輯
        } else {
          let errorArr = [];
          for (let key in object) {
            object[key].forEach((item) => {
              errorArr.push(item.message);
            });
            let dom = this.$refs[Object.keys(object)[0]];
            if (Object.prototype.toString.call(dom) !== '[object Object]') {
              dom = dom[0];
              break; //結(jié)束語句并跳出語句，進(jìn)行下個(gè)語句執(zhí)行
            }
            // 定位到報(bào)錯(cuò)項(xiàng)
            dom.$el.scrollIntoView({
              block: 'center',
              behavior: 'smooth',
            });
          }
          // 頁面提示未通過校驗(yàn)字段項(xiàng)，
          this.$message.error(errorArr[0]);
        }
      });
    },

// 子組件代碼
   verifyForm() {
      this.$refs.basicInfoRule.validate(valid => {
        if (valid) {
          // 校驗(yàn)通過
          return true
        } else {
          // 校驗(yàn)不通過
          return false
        }
      })
    },
    // 父組件代碼
    // 校驗(yàn)子組件表單（通過子組件綁定的ref來調(diào)用子組件的校驗(yàn)方法）
    async handleVerify() {
      if (
        !(await this.$refs.basicInfo?.verifyForm()) ||
        !(await this.$refs.priceSetting?.verifyForm())
      ) {
        this.$message.warning('請(qǐng)完善表單必填項(xiàng)')
        return false
      }
      return true
    },
    // 保存
      async saveMainDetail() {
      try {
        if (!(await this.handleVerify())) return
        } catch (e) {}    

// 子組件代碼
 verifyForm() {
      return new Promise((resolve, reject) => {
        this.$refs.basicInfoRule.validate(valid => {
          if (valid) {
            console.log(valid, '校驗(yàn)通過')
            resolve(true)
          } else {
            console.log(valid, '校驗(yàn)不通過')
            reject(new Error())
          }
        })
      })
    }

moveToErr () {
  this.$nextTick(() => {
    let isError = document.getElementsByClassName('is-error')
    if (isError.length) {
      isError[0].scrollIntoView({
        block: 'center',
        behavior: 'smooth'
      })
    }
  })
}