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

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

原创最新推荐文章于 2024-08-13 16:28:32 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

前端环境专栏收录该内容

7 篇文章

订阅专栏

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

//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) => {});
    },

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