el-switch的使用

基礎使用參考官網

這篇文章記錄更改用戶狀態，如果操作失敗，回到操作前的狀態的方法

change事件監聽用戶操作

代碼

<template>
    <el-table :data="tabelData" border>
      <el-table-column prop="id" label="編號"></el-table-column>
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column label="狀態">
        <template slot-scope="scope">
          <!-- {{scope.row}} -->
          <el-switch v-model="scope.row.status" @change="changeUserStatus(scope.row)"></el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default{
    name:"Custom",
    data(){
      return{
        tabelData:[
          {username:"Ann",id:1,status:true},
          {username:"Linda",id:2,status:false},
          {username:"July",id:3,status:true}
        ]
      }
    },
    methods:{
     async changeUserStatus(userinfo){
        console.log(userinfo)     
 　　　　await  let {data:res}=this.$http.put(`/update/${userinfo.id}/status/${userinfo.status}`)//使用了es6中的對象解析和字符串模板
      }
        if(res.code!=200){
    　　userinfo.status=!userinfo.status;
    　　}
    }
  }
</script>