element Switch开关 状态开关实现

一.开关的实现

总：

<el-table :data="userlist" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="create_time" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
             
        <el-table-column prop="mg_state" label="状态">
                  
                // 接收的数据  
          <template v-slot="scoped">

             //接收当前这一行的数据。运行代码，找到你需要的属性
            {{scoped.row}}
                 //把开关状态和数据做一下关联
            <el-switch v-model="scoped.row.mg_state" active-color="#13ce66"></el-switch>
          </template>
        </el-table-column>

        <el-table-column prop label="操作"></el-table-column>
      </el-table>

分：

1.用v-slot属性接收数据

 <template v-slot="scoped">
     //接收当前这一行的数据。运行代码，找到你需要的属性复制一波
       {{scoped.row}}
</template>

我的是：

2. 复制的东西在这使用，在v-model中，把开关状态和数据做一下关联

<template v-slot="scoped">
              {{scoped.row}}
            <el-switch v-model="scoped.row.mg_state" active-color="#13ce66"></el-switch>
          </template>

3.把下面插槽删掉

         {{scoped.row}}

ok

二.实时用户状态的修改

在 中添加一个Events事件

 <el-switch v-model="scoped.row.mg_state" active-color="#13ce66 "
             @change="userStateChaged(scoped.row)"></el-switch>

在中，具体与自己的API为准

   created() {
    this.getUserList();
  },
    methods: {
    async getUserList() {
      const { data: res } = await this.$http.get("users", {
        params: this.queryInfo
      });
      if (res.meta.status !== 200) {
        return this.$message.error("获取用户列表失败！");
      }
      this.userlist = res.data.users;
      this.total = res.data.total;
      console.log(res);
    },
    
     //监听 switch 开关状态的改变
   async  userStateChaged (userinfo){
     console.log(userinfo)
    const{data:res}= await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
    if(res.meta.status !==200){
      userinfo.mg_state= !userinfo.mg_state
      return this.$message.error('更新用户状态失败！')
    }
    this.$message.succeess('更新用户状态成功！')}
}