vue+elementui+select选择后如果取消弹框后怎样修改为旧值

责编:menVScode 2019-04-03 18:13 阅读(993)

需求表述:

elementui select+option中,选择后只能在select标签上添加change事件,option上无法添加事件。但是change事件一旦触发,会弹出一个弹窗,包含【确定】和【取消】的按钮,点击【确定】时候,select值变化,【取消】的时候,值还是旧值。

不过实际上,点击selecdt框的时候,其值已经改变。

现在,就要实现在select选择后弹框让用户确认一下是否要选择切换,如果点击了【确定】则改变,如果点击【取消】则不改变select中的值。


成功实现后效果图

GIF


解决思路:

1、用 watch 监听 select 上 v-model 绑定的值,比如:v-model="name" ;

2、定义 oldName 变量,点击 select 的时候,将旧值先保存在 oldName 里;

watch: {
    'name': {
        handler(curVal, oldVal) {
          this.oldName = oldVal
        }     } }

3、select 组件上的事件函数 reSelectItems(val, level),弹窗用的是 this.$confirm;

当点击【确认】时:this.name = val;

当点击【取消】时:this.name = oldName ;


实现的代码:

<template>
  <div id="newgood">
    <el-form ref="searchForm" :model="searchdata" size="small" label-width="100px" :rules="rules" >
      <el-form-item label="商品类目" prop="oneCategoryId">
        <el-select v-model="searchdata.oneCategoryId" placeholder="选择一级类目" @change="(val) => reSelectItems(val,2)" clearable filterable>
          <el-option v-for="item in levelone" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select v-model="searchdata.twoCategoryId" placeholder="商品二级类目" @change="(val) => reSelectItems(val,3)" clearable filterable :disabled="searchdata.oneCategoryId == ''">
          <el-option v-for="item in leveltwo" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select v-model="searchdata.threeCategoryId" placeholder="商品三级类目" @change="(val) => reSelectItems(val,4)" clearable

        filterable :disabled="searchdata.twoCategoryId == ''">
          <el-option v-for="item in levelthree" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      
    </el-form>

  </div>
</template>
<script>

  export default {
    data() {
      return {
        searchdata: {
          oneCategoryId: '',
          twoCategoryId: '',
          threeCategoryId: ''
        },
        oneCategoryOldId: '',
        twoCategoryOldId: '',
        threeCategoryOldId: '',
        
      }
    },
    methods: {
      // 编辑的时候,重新选择类目提醒
      reSelectItems(val, level) {
        const obj = getQueryObject()
        let popFn = () => {
          this.$confirm('更改类目会清空已录入的SKU,是否确认更改', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (level === 2) {
              this.searchdata.oneCategoryId = val
            } else if (level === 3) {
              this.searchdata.twoCategoryId = val
            } else {
              this.searchdata.threeCategoryId = val
            }

            if (level === 4) {
              this.getSKU(val)
            } else {
              this.nextlevel(level)
            }
          }).catch(() => {
            this.$message({ type: 'info', message: '已取消删除' })

            if (level === 2) {
              this.searchdata.oneCategoryId = this.oneCategoryOldId
            } else if (level === 3) {
              this.searchdata.twoCategoryId = this.twoCategoryOldId
            } else {
              this.searchdata.threeCategoryId = this.threeCategoryOldId
            }
          })
        }
      }
    },
    watch: {
      'searchdata.oneCategoryId': {
        handler(curVal, oldVal) {
          this.oneCategoryOldId = oldVal
        }
      },
      'searchdata.twoCategoryId': {
        handler(curVal, oldVal) {
          this.twoCategoryOldId = oldVal
        }
      },
      'searchdata.threeCategoryId': {
        handler(curVal, oldVal) {
          this.threeCategoryOldId = oldVal
        }
      }
    }
  }
</script>
标签: elementui vue select
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码