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

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

?

1 2 3 4 5 6 7

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

2. el-radio 单选处理

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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)"，具体代码如下：

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// 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来实现，代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107

// 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. el-form 表单校验，el-select时，trigger: 'change' 这样修改后会马上校验，trigger: 'blur'是校验输入框的，修改后马上校验，不是点了保存才校验

6.