vue使用elementUI动态渲染checkbox三级菜单

最新推荐文章于 2024-05-04 19:04:40 发布
最新推荐文章于 2024-05-04 19:04:40 发布
阅读量1.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bella0929/article/details/89319535
版权 
<template>
<div class="content">
          <el-row>
            <el-col :span="4" align="right">
              <div style="line-height: 40px;">权限</div>
            </el-col>
          </el-row>
          <el-row class="mb15">
            <el-col :span="18" :offset="3" align="left">
              <div class="boders">
                <el-checkbox
                  v-model="checkAll"
                  
                  @change="handleCheckAllChange"
                >全部</el-checkbox>
              </div>
            </el-col>
          </el-row>
          <el-checkbox-group @change="handleCheckedMenuChange"  v-model="checkedMenu" v-for="(item,index) in checkBoxData" :key="item.id">
最低0.47元/天 解锁文章
bella0929
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
全网第一篇：Vue 3.x + Element Plus 动态数据的分组checkbox全选实现方案(含Vue 2.x和Element UI写法）
liudun_cool的博客
07-09 999
全网第一篇！vue3.x下Element Plus组件库基于动态数据的checkbox全选，不是那种硬编码的简单示例数据哦！熬夜写的，你值得拥有。vue 2.x和Element写法也有介绍。
vue checkbox-group和checkbox动态生成，问题解决
liudongyang123的博客
09-08 1293
这个v-model按照 官方文档和多方资料意思就是必须要是一个集合，而且还得是空的，但是我的是根据后台返回的数据，动态生成的，这就导致了我没办法在return->data 中定义空数组，查找资料。二、一定要注意vue或者说elementui中的每个属性的拼写，我就是在按照网上的把处理方法加上后死活不管用，最后随意的一瞥。在获取到后台数据后，增加一个方法，这个方式是处理checkbox的空集合的，也就是说在form中将checkbox类型的属性，指定为空集合，重点是下面这个代码。
VUE实现elementUI多选框动态渲染
最新发布
qq_62175972的博客
05-04 272
1. 通过:check属性控制多选框动态勾选，但由于VUE特性多选框并不会实时渲染。2. 实现VUE组件实时渲染，可以设置:key属性进行强制渲染。② 由①所勾选的多选框，取消勾选时会删除数据库对应记录。① 若数据库中存在记录，则多选框会动态自动勾选。
vue中使用Checkbox 多选框循环遍历
热门推荐
weixin_43549979的博客
08-20 1万+
首先效果展示 步骤如下： 1、html <el-form> <el-form-item v-for="(item, index) in dataList" :key="index"> <el-checkbox @change="(val) => handleCheckAllListChange(val, item)" :indeterminate="itemIndet
ElementUI三级菜单checkBox全选实现
不见长安见晨雾
02-19 3509
效果预览 解决方案 UI代码 // 这段代码主要是遍历权限 &amp;amp;lt;el-form-item label=&amp;quot;角色权限&amp;quot; prop=&amp;quot;checkedPerms&amp;quot;&amp;amp;gt; &amp;amp;lt;el-checkbox-group v-model=&amp;quot;form.checkedPerms&amp
vue3 权限菜单( 树形菜单)无限循环
liyongchunscr的博客
05-19 1722
在系统开发过程中，最常见的一个需求就是权限控制了，大到整个系统的用户权限的管理，小到某个状态下操作权限的判断。 其中最常见的操作就是权限的添加、删除、鉴权等，那么有什么简单的方法可以去控制这些权限呢？ 这个项目是根据后台返回的用户可访问的id来判断用户是否有权限来更改这个页面 首先看一下后台返回的数据格式，一维数组需要我们把数据进行 使用递归算法动态渲染不定层级的菜单 将一维数组通过递归生成el-tree所需要的树形结构数组。 ...
详解VUE Element-UI多级菜单动态渲染的组件
10-17
主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue + elementUI实现省市县三级联动的方法示例
10-16
主要介绍了vue + elementUI实现省市县三级联动的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue+ElementUI实现表单动态渲染、可视化配置的方法
08-27
主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
主要介绍了vue+element使用动态加载路由方式实现三级菜单页面显示的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-checkbox-group多选框编辑时渲染显示，修改选择无效问题；
onlylele的博客
03-30 2391
1、问题描述：使用elementui 中的多选框组件，编辑表单内容时可以正常显示，但是改变时一个选择无效，显示状态没有修改成功问题；如下图所示： 2、使用说明：仅部分主要代码，markList 为被选项列表。 // 修改客户标签改变 , i handleRoleCheckedChange(m) { this.markList.forEach((itds, i) => { if (itds.wholesaler_mark_id === m.wholesal
vue基于element-ui的三级CheckBox复选框功能的实现代码
10-17
最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。这篇文章主要介绍了vue基于element-ui的三级CheckBox复选框功能的实现方法,需要的朋友可以参考下
前端技术之checkBox嵌套
dijia1280的博客
02-10 319
此处为html页面 <table width="100%" border="1" class="table table-striped table-bordered table-condensed"> <form id="form1" name="form1" action="/rightRolePrivilege/update" method="post" &...
el-checkbox vue 三级联动实现全选
sunlu12312的博客
04-23 1044
这个样子的 先是html <template #default> <div class="container"> <el-checkbox :indeterminate="isDocIndeterminate" v-model="checkDocAll" @change="handleCheckAllDocChange">报告</el-checkbox>
el-table checkbox （解决label值相同同时变化、checkbox状态无法动态更新)
song766426的博客
08-09 3109
解决checkbox label值相同、视图无法更新问题
vue3 组件篇 Checkbox
秋来九月八
10-01 7472
实现的思路主要是依靠input type="checkbox",我们可以在这基础上修改样式，来实现新的组件ui，change事件和checked的逻辑，可以依靠input type="checkbox"自带的逻辑，这样可以省去很多代码。
vue 实现从后端获取数据渲染选择框
weixin_41431016的博客
06-30 2143
前端环境：vue 使用的vue 组件：iview 后端项目框架：beego 实现功能：从数据库中读取数据绑定到选择菜单栏 前端定义请求的路由地址 文件：src/api/demands.js // 获取集群列表 export const getClusterList = ()=>{ return SiodAxios.request( { url: baseU...
Vue + element ui 实现后台数据渲染到下拉框选项中，同时将input框与下拉框联动，select选定之后，input显示对应的值
Liuliu_x的博客
04-28 1万+
实现过程： 使用element 的select以及input输入框 <el-form-item label="Mid" prop="mid"> <el-select filterable v-model="form.mid" placeholder="请选择" > <el-option v-for="item in midList" :key="item.value" :label="item
vue elementui 三级checkbox
09-01
vue element-ui 提供了多级的 checkbox 组件，可以实现三级的 checkbox 功能。 首先，需要在组件中引入 element-ui 的 checkbox 组件和三级数据。 ```html <template> <div> <el-checkbox v-model="checkedAll" @change="handleCheckedAllChange">全选</el-checkbox> <el-checkbox-group v-model="checkedCities"> <el-checkbox :indeterminate="isIndeterminate" @change="handleCheckedCitiesChange(city)" v-for="city in cities" :label="city.value" :key="city.id"> {{ city.label }} </el-checkbox> </el-checkbox-group> </div> </template> <script> export default { data() { return { cities: [ { id: 1, label: '北京', value: 'beijing', children: [ { id: 11, label: '东城区', value: 'dongcheng', }, { id: 12, label: '西城区', value: 'xicheng', }, ], }, { id: 2, label: '上海', value: 'shanghai', children: [ { id: 21, label: '浦东新区', value: 'pudong', }, { id: 22, label: '徐汇区', value: 'xuhui', }, ], }, ], checkedCities: [], // 选中的城市 checkedAll: false, // 全选状态 isIndeterminate: false, //是否为半选状态 }; }, methods: { handleCheckedAllChange() { this.checkedCities = this.checkedAll ? this.getCitiesValues() : []; this.isIndeterminate = false; }, handleCheckedCitiesChange(city) { const checkedCount = this.checkedCities.filter( (item) => item.startsWith(city.value), ).length; if (checkedCount === city.children.length) { // 子节点全选中，则取消选中父节点 this.checkedCities = this.checkedCities.filter( (item) => !item.startsWith(city.value), ); } else { // 子节点未全部选中，则选中父节点 this.checkedCities = [ ...this.checkedCities, ...city.children.map((child) => child.value), ]; } this.checkedAll = this.checkedCities.length === this.getCitiesValues().length; this.isIndeterminate = this.checkedCities.length > 0 && this.checkedCities.length !== this.getCitiesValues().length; }, getCitiesValues() { return this.cities.reduce((pre, cur) => { pre.push(cur.value); cur.children.forEach((child) => pre.push(child.value)); return pre; }, []); }, }, }; </script> ``` 上面的示例中，我们使用了 `el-checkbox` 和 `el-checkbox-group` 组件来构建多级的 checkbox，`v-model` 指令绑定了选中的数据，通过 `@change` 事件监听选中状态的变化。 `handleCheckedAllChange` 方法用于全选/取消全选操作，更新选中的城市数组，并设置全选状态和半选状态。 `handleCheckedCitiesChange` 方法用于子节点的选中操作，根据子节点的选中状态更新父节点的选中状态，并更新全选状态和半选状态。 `getCitiesValues` 方法用于获取所有城市和子节点的值，方便判断全选状态和半选状态。 这样我们就可以实现三级 checkbox 的功能了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值