element el-checkbox 选中后无法改变状态

最新推荐文章于 2024-08-13 16:28:32 发布

zongfunday

最新推荐文章于 2024-08-13 16:28:32 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端环境文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/u014788505/article/details/121546014

前端环境专栏收录该内容

7 篇文章

订阅专栏

该博客介绍了如何在Vue.js应用中利用el-checkbox-group组件和roleChange方法处理角色选择的变更。通过v-for指令动态渲染角色列表，并通过@change事件监听用户的选择。当角色状态改变时，根据ischecked参数调用接口进行角色的添加或删除操作，实现了用户角色的增删功能。

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

//dom:        
<el-checkbox-group v-model="checkList"  >
   <!-- $event读取自带事件 -->
   <el-checkbox v-for="item in roleList" :label="item.roleName" :key="item.id"          
    @change="roleChange($event,item)" ></el-checkbox>
</el-checkbox-group>


//methods:
//使用change事件
    roleChange(ischecked,val) {
      console.log(ischecked,'所点击的事件默认选中状态')
      var requestUrl;
      if (ischecked) {
        let option = {
          roleId: val.id,
          userId: this.form.userId,
        };
        requestUrl = this.api.setUserRole(option);
      } else {
        requestUrl = this.api.delUserRole(`${this.form.userId}/${val.id}`);
      }
      requestUrl.then((data) => {});
    },

尽量遵循规则来读懂文档少走弯路