vue+el-switch开关的使用

我会带着你远行 2022-10-14 12:55 377阅读 0赞

## 重点！！注意change事件的 $event 参数！！是开关变化的新状态值！ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]

<el-table-column prop="showIndex" label="首页展示" width="150" >
              <template slot-scope="scope">
                <el-switch v-model="scope.row.showIndex" active-value="1" inactive-value="0" active-text="是" inactive-text="否" @change="setShowHome(scope.row,$event)" />
              </template>
    </el-table-column>

methods
    
    setShowHome(row, val) { 
          this.$confirm(`是否确认${ val == '1' ? '开启' : '关闭'}首页显示？`, '提示', { 
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => { 
            setShowHome({  idList: [row.id], showIndex: val }).then(res => { 
              if (res.code == '200') { 
                this.$message({ 
                  type: 'success',
                  message: '首页显示设置成功',
                  offset: 100
                })
              } else { 
                this.$message({ 
                  type: 'error',
                  message: '首页显示设置失败',
                  offset: 100
                })
                if (val == '0') { 
                  row.showIndex = '1'
                } else { 
                  row.showIndex = '0'
                }
              }
            })
          }).catch(() => { 
            // 取消时恢复原始开关状态
            if (val == '0') { 
              row.showIndex = '1'
            } else { 
              row.showIndex = '0'
            }
          })
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: /images/20221014/d4ce9faf047346a494e34a66d6193a2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221014/7be150a6440b4b03b23376ecf772be69.png