vue el-table el-switch开关的使用

change事件的 $event 参数！！是开关变化的新状态值！

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