摘要:现在做项目主要用的框架差不多都是,但是每个项目设计的不同难免和组件产生差异甚至是大不相同,有的时候差异少比如页面样式不太相同,功能使用完全一样的话,这样改改样式就可以了,但是要大部分不同,而且改出来之后和设计稍差的话就可以自己来写了。。。
现在做vue项目主要用的ui框架差不多都是elementui,但是每个项目设计的不同难免和element组件产生差异甚至是大不相同,有的时候差异少比如页面样式不太相同,功能使用完全一样的话,这样改改样式就可以了,但是要大部分不同,而且改出来之后和设计稍差的话就可以自己来写了。。。
编写一下select树形结构且多选组件,递归循环树形结构数据,无需定义其他关联键值
树形数据,几级都可以
List: [ // 部门数据
{ value: "河北省", children: [ { value: "唐山市区", children: [ { value: "A区", children: [ { value: "111" } ] }, { value: "B区", children: [ { value: "222" } ] }, { value: "C区", children: [ { value: "3333" } ] }, ] }, { value: "滦县区", children: [ { value: "44444" } ] }
]
递归循环添加id 层级,相当于加一个标志符
this.departmentList.map((item,index) => { item.id = 0; item.children && this.checkChild(item.children,item.id); })
拿到自己要渲染的数组
// 点击选项添加数据 change (val, value, index) { // 获取数据内的层级id let id =val.id // 提前创建好二维数组防止报错,后面会进行空数组的清空操作 this.all.push([]) this.all[this.num].splice(id, 0, val) // 用户点击之后是否有子数据,有的话加入Renderingarr渲染子数据,开启限制 if(val.children) { this.renderingArr.push(val) this.isOpenFirst = true } // 提前创建盛放已选内容的二维数组,功能和all一样 this.selectedValue.push([]) this.selectedValue[this.num].splice(id, 1 , { value, id, num: this.num }) // this.selectArr.splice(this.num,1, [this.value[this.num][this.value[this.num].length-1]]) // 存储每个已选的最后一位作为tag this.selectArr.splice(this.num, 1, this.selectedValue[this.num][this.selectedValue[this.num].length-1].value) }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100527.html
摘要:以下内容根据部分速记。同时,需要在父组件标签中添加这个属性,该属性才能传递到子组件内。把父组件传递的数据当做子组件的初始值。 以下内容根据Vue.js Guide Essentials部分速记。 不含动画/mixin/SSR/路由/状态管理等部分. Introduction 建议阅读原文 https://vuejs.org/v2/guide/in... 什么是Vue 开始 声明式...
摘要:由于项目需求,在项目中使用用到了中的组件的多选功能,多选之后保存回显所选内容,从后端会拿到一个数组,然后我把这个数组赋值给前端多选对应的数组,这样多选的数据可以正常显示问题是回显之后不能正常编辑,点击删除小图标也失效解决方法采用事件在事件中 由于项目需求,在项目中使用用到了element中的select组件的多选功能(multiple),多选之后保存回显所选内容,从后端会拿到一个数组,...
摘要:它的文档也是相当详细,每个功能都配有详细说明和实例代码,直接复制就可以使用,我们也计划在明年启动英文文档翻译计划。明年会启动英文文档翻译计划,也希望喜欢和支持,同时英语不错的同学可以加入我们,一起参与翻译。 前段时间在微软参加活动,分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验,现整理成文,和大家探讨。 showImg(htt...
一个vue calendar的npm组件 说明: 1.基于element-ui开发的vue日历组件。 showImg(https://segmentfault.com/img/remote/1460000015420326?w=507&h=472); 地址 更新: 1.增加value-format指定返回值的格式2.增加头部插槽自定义头部 {{ slotProps.todo}} ...
阅读 2293·2021-09-22 15:27
阅读 3165·2021-09-03 10:32
阅读 3490·2021-09-01 11:38
阅读 2492·2019-08-30 15:56
阅读 2206·2019-08-30 13:01
阅读 1531·2019-08-29 12:13
阅读 1409·2019-08-26 13:33
阅读 884·2019-08-26 13:30