el-switch 开关二次确认

最新推荐文章于 2026-02-21 00:29:02 发布

原创最新推荐文章于 2026-02-21 00:29:02 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css3 #html #vue

本文介绍了一个基于Vue的表格组件中实现开关状态改变前的确认弹窗功能。通过自定义方法`handelUpdate`及封装的`Switchs`函数来确保在用户更改开关状态前能够进行二次确认。

<el-table-column label="AAA" 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文件之后的

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