vue中checkbox回填与获取选中的值

最新推荐文章于 2025-04-02 10:58:41 发布

code12313

最新推荐文章于 2025-04-02 10:58:41 发布

阅读量6.7k

点赞数 3

分类专栏： Vue学习笔记文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/code12313/article/details/125977807

版权

Vue学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Vue.js实现从数据库读取的数据自动选中checkbox，同时处理用户操作后的数据更新并保存回数据库。通过实例展示了如何设置v-model绑定、遍历数据及处理用户交互的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目用到了checkbox控件，需要从数据库获取数据，并且有的数据从数据库读取出来后就是选中状态的，在页面中选中数据后在保存到数据库中。

以下是全部代码



        <label v-for="item in UserRoleList" v-bind:key="item.rId">

           <input name="roles" type="checkbox" :value="item.rId" :disabled="item.isDisabled" v-model="checkVal"/>{{item.roleName}}

        </label>

          <el-button type="primary" @click="updateUser">确定</el-button>


说明：v-model="checkVal"  checkbox会根据checkVal中的值默认选中数据，checkVal必须是数组

以下是javascript部分

data () {

    return {

      updateUid:'',  //修改的用户Id

      checkVal:[],  //checkbox选择角色回填和选中的值

    }

  }
created() {
    this.getRoleList()  //加载select中角色信息
  },
methods: {

 //编辑角色获取用户角色接口

    getUserRoles(userid){

      this.$axios.post('',{uId:userid},{headers: {

        accessToken: util.cookies.get('token')

      }}).then(res=>{

        this.UserRoleList=res.roleList;  //加载全部数据

        this.checkVal=[];

        this.UserRoleList.forEach(i=>{

          if(i.isChecked){  //根据此字段判断页面中的checkbox是否选中，如果选中放到checkVal数组中

            this.checkVal.push(i.rId);

          }

        })

      })

    }

},

    //修改用户

    updateUser(){

      if(this.updateUid==""){

        this.$message({type:'error',message:'请选择用户'})

        return;

      }

      if(this.checkVal.length==0){

        this.$message({type:'error',message:'请选择角色信息'})

        return;

      }

    // 修改时这里可以获取到checkbox中全部选中的值

      this.$axios.post('',{uId:this.updateUid,roleIds:this.checkVal.join(',')},{

        headers: {

            accessToken: util.cookies.get('token')

            }

      }).then(res=>{

        if(res>0){

          this.$message({type:'success',message:'修改成功'});

        }

      })

    }