element-ui中表格中的Switch 开关如何使用及调接口

这是效果图

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

二、调接口，修改开关数据
给el-waitch加上hcange事件

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

下面附上代码

 <!-- 表格 -->
      <el-table :data="tableData" border="" style="width: 100%">
        <el-table-column type="index" width="50" label="#"></el-table-column>
        <el-table-column prop="username" label="姓名" width="180"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色" width="180"></el-table-column>
        <el-table-column prop="name" label="状态" width="180">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change="changeStatus($event,scope.row,scope.$index)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

methods中的方法

    // 开关事件
    changeStatus(e,row,index){ 
      console.log(e,row,index) //e返回状态，row当前行数据，index下标
       let uId=row.id;
       let type=row.mg_state
      this.$api.adimndiction.switchChange(uId,type)
      .then(res =>{
        console.log(res,"]]]]]]")
        if(res.data.meta.status !== 200){
          this.$message.error(res.data.meta.msg)
        }else{
          this.$message.success(res.data.meta.msg)
        }
      })
    },