iview table里switch点击事件

问题:当我们在table中使用switch时,一般都是点击switch开关组件,直接调用接口,从而控制改变switch开关,但是当switch调用接口无论成功与否,都会改变状态,因为table里的switch只是赋值,没有动态绑定变量,所以无法直接修改switch的状态,此时我们想先判断接口是否调用成功,再进行控制switch的状态是否该改变.

<template slot="isEnable" slot-scope="{ row, index }">
     <i-switch v-model="row.isEnable" size="large" @mousedown.native="switchSonHandle(row.newsId)" :before-change="switchSonBeforeHandle">
        <span slot="open">启用</span>
        <span slot="close">停用</span>
     </i-switch>
 </template>

一,使用mousedown事件储存所点击数据源的id,以方便后续修改此条数据

/**
           * table里switch 鼠标点下事件 存储id
           */
          switchSonHandle(newsId){
            this.newsSwitchStatus=newsId
          },

(因为before-change无法传参,所以需要存id多一步操作,此处为什么没有使用常用的click事件呢?是因为click事件在before-change事件之后才执行,此时before-change中拿不到id,故而达不到我们的目的,mousedown事件会优先于before-change事件执行,把id值储存下来)

二,使用before-change 进行判断接口是否调用成功,再进行控制switch状态

/**
           * table里switch改变之前出发的事件
           */
          switchSonBeforeHandle(){
            return new Promise((resolve) => {
              changeStatusMediaAPI({newsId:this.newsSwitchStatus}).then(res=>{
                if(res.success){
                  resolve();//switch状态会改变
                  this.$Message.success('成功')
                }else{
                            //switch的状态不会改变
                  this.$Message.error('失败')
                }
              })
            })
          },