当在做后台管理系统的时候，会用到用户的状态管理这个功能。一般后端给返回的类型都是整型0或1。此时想通过该状态来禁用或者开启此用户。

         在官网中给到active-value(switch 打开时的值),inactive-value(switch 关闭时的值),并且支持的类型有boolean / string / number。一般后端传输的都是以number类型。

        active-value和inactive-value的值分别是字符串的1和0,如果你赋值为数字类型的 1 或 0是无法正常工作的，若赋值为数值类型，需这样写：

<el-switch v-model="status"

:active-value="1"

:inactive-value="0">

</el-switch>

  一、 此时若想跟表格中匹配几条数据就有几个开关时需要这样写：

1、要拿到当前行的数据在template标签中使用**slot-scope=“scope”就可以了
2、使用时在 v-model=“scope.row.字段”就可以把后端返回的开关数据展示在表格中

<el-table-column prop="disable" label="状态" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
            ></el-switch>
          </template>
</el-table-column>

二、触发时间调用后端接口，修改开关数据

给Switch 开关加上@change="changeStatus($event, scope.row, scope.$index)"

<el-table-column prop="disable" label="状态" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="changeStatus($event, scope.row, scope.$index)"  //加上触发时间
              :active-value="scope.row.disable == 1"     //根据后端返回的数据绑定1为开的状态
              :inactive-value="scope.row.disable == 0"   //根据后端返回的数据绑定0为关的状态
            ></el-switch>
          </template>
  </el-table-column>

在methods中写上方法，去调接口
方法名(e,row,index) //e返回状态true或false，row当前行数据，index下标

 changeStatus(e, row, index) {
    //e返回状态，row当前行数据，index下标
        console.log(e, row, index);
        let userId = row.userId;
        let disable = row.disable;
    axios.get(`http://xxxxx/xx?userId=${userId}&disable=${disable}`).then((res)=>{
        console.log(res);
})

}