html手写vue多级选择框,vue多级多选菜单组件开发

本文实例为大家分享了vue多级多选菜单组件的制作方法，供大家参考，具体内容如下

要开发一个这样的多级多选菜单组件，功能是：

点击父标题栏可以打开与折叠子列表

点击父标题栏的勾选图标可以全选或取消子列表

点击子列表的勾选图标达到全选时，父标题栏的勾选图标自动勾选；反之，没达到全选时，父标题栏的勾选图标自动取消勾选

当所有父标题栏的勾选图标达到全选时，最底下那个全选框自动勾选；反之，没达到全选时，最底下那个全选框自动取消勾选

点击最底下那个全选框可以全选或取消全部的勾选图标

所以总结起来我们重点要利用子列表勾选了哪些项来计算出父标题与底下的全选框是自动勾选还是自动取消，并且父标题与底下的全选框在选择变化时子列表应有什么变化。要做到以上，实现过程是：

构建我们model层数据

datas : [

{

//用于判断是否展示子列表

isShowListItem : false,

//用于记录选中了哪些子项

selected : [],

//父标题

listTitle : "保利南悦湾",

//子列表

listItem : [

{

id : 1,

name : "李小龙"

{

id : 2,

name : "周星驰"

{

id : 3,

name : "周杰伦&

html手写vue多级选择框,vue多级多选菜单组件开发相关推荐

html手写vue多级选择框,vue + html 编写仿element select 多选组件
现在做vue项目主要用的ui框架差不多都是elementui,但是每个项目设计的不同难免和element组件产生差异甚至是大不相同,有的时候差异少比如页面样式不太相同,功能使用完全一样的话,这样改改样 ...
手写一个二级选择框联动
(图一) (图二) 如上图所示,当选择类型时,阶段选择内部需要显示该类型里面的阶段. 大概可以这样子理解: {类型1:{阶段M: XXX},类型2:{阶段N: XXX,阶段E: XXX} } 代码分析 ...
html如何既能应用于pc端也能用于手机端_如何选择一个 vue ui 框架？
目录 1,比较流行的 UI 框架有哪些? 1.1 适用 PC 端 1.2 适用移动端 1.3 其它 2,vuetify 是什么,为什么选择它? 2.1 Vuetify给出的 vue ui 框架对比图 ...
react 图片放在src里面还是public_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
react打包后图片丢失_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
手写一个简版的vue
Vue源码中实现依赖收集(观察者模式),实现了三个类: Dep:扮演观察目标的角色,每一个数据都会有Dep类实例,它内部有个subs队列,subs就是subscribers的意思,保存着依赖本数据的观 ...
vue级联选择框(Cascader)动态渲染数据
<el-cascaderv-model="baseForm.selectAdressKeys"ref="cascader"@change="ar ...
js+jquery手写弹出提示框
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
html选择框树结构,带复选框tree树结构插件MultipleTreeSelect.js
使用方法引用所需要的文件 html js对输入框加入数据 var zNodes = [ {id: 1, pId: 0, name: "火之国", open: true}, { ...

html手写vue多级选择框,vue多级多选菜单组件开发

html手写vue多级选择框,vue多级多选菜单组件开发相关推荐

最新文章

热门文章