这是效果图
一、展示开关数据
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)
}
})
},