elementUI switch 开关状态更新到数据库

配合  slot-scope 作用域插槽使用    scope.row 可以获取当前所在行的每项数据

1.监听 switch 开关的 change事件 拿到最新状态

2.发送请求 调用接口 同步数据

 <el-table-column prop="mg_state" label="状态">
          <!-- 作用域插槽 处理后台返回数据 true-false 0-1  -->
          <template slot-scope="scope">
            <!-- {
  {scope.row.mg_state}}  slot-scope 作用域插槽 scope.row 可以获取当前所在行的数据 -->
            <!-- 开关  -->
            <el-switch @change="change(scope.row)" v-model="scope.rew.mg_state"></el-switch>
          </template>
        </el-table-column>
 // 回调函数 用户表格中的 switch 开关状态  发生改变时触发
    change(usersInfo){
      console.log(usersInfo);
      //发送put请求修改 switch  开关 状态  请求路径:users/:uId/state/:type
       this.axios.put(`users/${usersInfo.id}/state/${usersInfo.mg_state}`).then(res=>{
         console
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值