在一个项目中,使用el-radio-group来切换页面模式,在切换页面时,如果M2页面的内容区的表单有内容需要被清空,于是需要在切换前让用户确认一下。但是el-raiod-group没有提供类似beforeChange的函数钩子,于是只能自己想办法实现了。

使用:value和@input取代 v-model

      <el-radio-group :value="gluingMode" @input="testHandle">
        <el-radio :key="1" label="M1">模式1</el-radio>
        <el-radio :key="2" label="M2">模式2</el-radio>
      </el-radio-group>

@input的方法

          testHandle(name){
           // 判断内容区表单是否有值,无值的可直接切换无需询问
            const machineCode_arrs = Object.keys(app.information)
            let isFilledContent = false
            machineCode_arrs.length > 0?isFilledContent = true : isFilledContent = false
            if (name === 'M2') {
              this.messageList.push({
                message: '已切换为:['+name+']模式',
                time: new Date(),
              })
              sessionStorage.setItem("scanMode", name)
              this.gluingMode = name
            }
            if (name === 'M1') {
              // 如果内容区表单已填写数据
              if (isFilledContent===true) {
                this.gluingMode = 'M2'
                const isflag = window.confirm("是否要切换为M1模式,继续将清空页面数据?")
                if (isflag) {
                  this.gluingMode = name
                  sessionStorage.setItem("scanMode", name)
                  if (machineCode_arrs && machineCode_arrs.length > 0) {
                    machineCode_arrs.forEach(item => {
                    // 清空表单值
                      this.$set(app.information[item],'total','')
                      this.$set(app.information[item],'postName','')
                    })
                    // 部分页面值需要刷新才能清空
                    location.reload()
                    setTimeout(() =>{
                      this.messageList.push({
                        message: '已切换为:['+name+']模式',
                        time: new Date(),
                      })
                    },4)
                  }
                } else {
                  return false
                
                }
              } else {
                // 如果表单没有数据,则直接切换就好
                this.messageList.push({
                    message: '已切换为:['+name+']模式',
                    time: new Date(),
                  })
                this.gluingMode = name
                sessionStorage.setItem("scanMode", name)
              }  
            }
          },
Logo

前往低代码交流专区

更多推荐