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')
            }
        })
    

      

  • 相关阅读:
    关于禁用发布可能出现的问题处理
    SQL Server数据库的整理优化的基本过程(一)
    分享SQL2005分区实现教程
    Oracle数据库的测试用户Scott的密码为什么是Tiger?
    这就是传说中的搜狗浏览器2.0
    IE6,IE7下双倍边距续
    IE7下fload:left造成双倍边距BUG
    as2和as3之间交互
    倒计时效果
    js拖动层效果
  • 原文地址:https://www.cnblogs.com/tlfe/p/11710423.html
Copyright © 2011-2022 走看看