el-form、form 等表单校验哪些事

1. el-dialog 弹框固定在窗口上，如何设置上代码

/deep/ .el-dialog {
  margin: 5vh auto !important;
}
/deep/ .el-dialog__body {
  height: 80vh;
  overflow: hidden;
}

2. el-radio 单选处理

data () {
  return {
     detailApprovalPass: '', // 处理取消单选,不能放到form对象来处理，需要单独处理
  }
}
<el-radio-group  v-model="detailApprovalPass">
  <el-radio label="1" @click.native.prevent="clickAuditRadio('1')">审核通过</el-radio>
  <el-radio label="0" @click.native.prevent="clickAuditRadio('0')">退回</el-radio>
</el-radio-group>

methods: {
    // 取消单选处理
    clickAuditRadio (val) {
      parseInt(val) === parseInt(this.detailApprovalPass) ? this.detailApprovalPass = '' : this.detailApprovalPass = val
      this.senceForm.detailApprovalPass = this.detailApprovalPass
      this.senceForm.assignor = ''
      if (this.detailApprovalPass === '') {
        this.senceForm.detailApprovalOpinion = ''
      }
    }
}

3. 复选框 el-checkbox v-model 绑定的是某个值，但返回数据时，我们想要某个对象该怎么做？这里尝试修改el-checkbox的change事件@change="val => checkoutChange(val, item)"，具体代码如下：

多组复选框多选，关键代码如下：

// checkoutBoxList 复选框选中的数组，里面只存放一个字段如中文name
<el-checkbox-group v-model="checkoutBoxList">
<div
v-for="(items, index) in textList"
:key="index"
class="checkout-row"
>
<div class="dialog-title">{{ items.name }}</div>
<el-checkbox
v-for="item in items.list"
:label="item.namd"
:key="item.id"
@change="val => checkoutChange(val, item)"
></el-checkbox>
</div>
</el-checkbox-group>
// 是返回后端的数组backCheckoutList，选中的id与之比较
methods: {
   // 改变后代码处理
    checkoutChange(val, currentItem) {
      currentItem.flag = val
      if (val) {
        this.backCheckoutList.push(currentItem)
      } else {
        this.backCheckoutList = this.backCheckoutList.filter(
          item => item.id !== currentItem.id
        )
      }
    },
}

4. 不满足条件不切换el-tabs,具体实现的场景是el-tabs切换之前判断是否满足切换条件 不满足条件仅提示不切换Tab，需要实现的钩子方法:before-leave="beforeLeave"，在调用之前来判断，刚开始是通过简单的变量来判断，现在弹出框弹出之前变量逻辑已经走完，promise有异步处理功能，这里使用promise来实现，代码如下：

// dom   
 <el-tabs v-model="activeName" :before-leave="beforeLeave">
        <el-tab-pane label="aa" name="first"></el-tab-pane>
        <el-tab-pane
          label="bb"
          name="sencend"
          :disabled="disableTab"
        ></el-tab-pane>
        <el-tab-pane
          label="cc"
          name="third"
          :disabled="disableTab"
        ></el-tab-pane>
      </el-tabs>
     <div class="button-area">
        <div v-if="activeName === 'first'">
          <el-button class="next-button" @click="firstSubmit"
            >aa</el-button
          >
        <div v-else-if="activeName === 'sencend'">
          <el-button class="next-button" @click="nextButtonClick('lastStep')"
            >bb</el-button
          >
        </div>
        <div v-else>
          <el-button class="next-button" @click="nextButtonClick('lastStep')"
            >上一步</el-button
          >
        </div>
      </div>
// computed方法：用到的时候再用
   disableTab() {
      let flag = false
      if (//根据条件来判断后面两个是否置灰) {
        flag = true
      }
      return flag
    },
// methods方法
methods: {
    beforeLeave() {
      if (this.isNextTab) { // 点击按钮时，改变activeName来触发el-tabs时不走promise方法，直接走promise方法就好，要不会弹框两次
        this.isNextTab = false
        return true
      }
      return this.handleTab()
    },
// 使用promise来实现确认之后切换
    handleTab() {
      return new Promise((resolve, reject) => {
        this.$confirm(
          `切换前请先确认页面内容已保存，是否确认切换？`,
          '切换模板',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }
        )
          .then(() => {
            resolve()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
            reject()
          })
      })
    },
    firstSubmit() {
      this.handleTab().then(() => {
        this.isNextTab = true
        // 调用接口地方
      })
    },
   // 按钮实现调用tabs时处理方法
    nextButtonClick(stepName) {
      this.handleTab().then(() => {
        this.isNextTab = true
        switch (this.activeName) {
          case 'first':
            {
              this.activeName = 'sencend'
            }
            break
          case 'sencend':
            if (stepName === 'lastStep') {
              this.activeName = 'first'
            } else if (stepName === 'nextStep') {
              this.activeName = 'third'
            }
            break
          case 'third':
            if (stepName === 'lastStep') {
              // 上一步
              this.activeName = 'sencend'
            }
            break
          default:
            break
        }
      })
    }
}    

5.

6.