zoukankan      html  css  js  c++  java
  • 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')
            }
        })
    

      

  • 相关阅读:
    Android 源代码解析 之 setContentView
    poj 2484 A Funny Game
    BlueDroid代码分析之GKI
    Chromium多线程模型设计和实现分析
    关于template 的23个问题
    Struts2 动态结果集
    沁园春&#183;咏史
    android中常见的内存泄漏和解决的方法
    Spring整合freemarker发送邮件
    [struts2学习笔记] 第三节 创建struts 2 HelloWorld所需的六个步骤
  • 原文地址:https://www.cnblogs.com/tlfe/p/11710423.html
Copyright © 2011-2022 走看看