elementui switch 开关,点击确认按钮后在进行开关

         <el-table-column label="上头条" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isRecommendTwo"
                active-color="#52C4CD"
                @change="handelUpdate(scope.$index, scope.row)"
                inactive-color="#DCDFE6"
                :active-value="true"
                :inactive-value="false"
              ></el-switch>
            </template>
          </el-table-column>

  

methods: {
    handelUpdate(index,row){
    // :active-value得为true
    // :inactive-value得为false
      let flag = row.isRecommendTwo //保存点击之后v-modeld的值(true,false)

      row.isRecommendTwo = !row.isRecommendTwo //保持switch点击前的状态

      this.$confirm('是否确认此操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(flag){
            row.isRecommendTwo = true
            // 逻辑处理
            this.$message.success('打开成功!')
          }else{
            row.isRecommendTwo = false
            // 逻辑处理
            this.$message.success('关闭成功!')
          }
        }).catch(() => {
      this.$message.info('取消操作!')
        });
    },

封装到****.js文件之后的

/**
 * @author fu
 * @description switch开关 点击按钮后,弹窗确认再改变开关状态
 * @param {Object} row  当条数据的内容对象
 * @param {String} value v-modeld值
 * @returns {Boolean} 打开了按钮返回true,关闭了按钮返回false
 */

function Switchs(_this,row,value){
    console.log("switch开关 点击按钮后,弹窗确认再改变开关状态",row)
    return new Promise((resolve,rejects) => {
        let flag = row[value] //保存点击之后v-modeld的值(true,false)
    
        row[value] = !row[value] //保持switch点击前的状态
    
        _this.$confirm('是否确认此操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            if(flag){
                row[value] = true
                _this.$message.success('打开成功!')
                resolve(true)
            }else{
                row[value] = false
                _this.$message.success('关闭成功!')
                resolve(false)
            }
        }).catch(() => {
            _this.$message.info('取消操作!')
        });
    })
}

export default{
  Switchs
}

  

封装之后使用

improt loot from 'loot.js文件路径'

loot.Switchs(this,row,'isRecommendTwo').then(flag=>{
        if(flag){
          console.log('true')
        }else{
          console.log('false')
        }
    })

  

原文地址:https://www.cnblogs.com/tlfe/p/11710423.html