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

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM