vue + html 编写仿element select 多选组件

Enlightenment 发布于2019-08-23 14:23 / 3363人阅读

摘要：现在做项目主要用的框架差不多都是，但是每个项目设计的不同难免和组件产生差异甚至是大不相同，有的时候差异少比如页面样式不太相同，功能使用完全一样的话，这样改改样式就可以了，但是要大部分不同，而且改出来之后和设计稍差的话就可以自己来写了。。。

现在做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)
    }

GPU云服务器云服务器多选select element-ui dialog组件 vue组件 vue组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100527.html

Vue.js Guide Essentials-说人话-速记版

摘要：以下内容根据部分速记。同时，需要在父组件标签中添加这个属性，该属性才能传递到子组件内。把父组件传递的数据当做子组件的初始值。以下内容根据Vue.js Guide Essentials部分速记。不含动画/mixin/SSR/路由/状态管理等部分. Introduction 建议阅读原文 https://vuejs.org/v2/guide/in... 什么是Vue 开始声明式...

Sanchi 2019-08-21 18:38 评论0 收藏0
element ui中的select多选回显之后不能正常编辑

摘要：由于项目需求，在项目中使用用到了中的组件的多选功能，多选之后保存回显所选内容，从后端会拿到一个数组，然后我把这个数组赋值给前端多选对应的数组，这样多选的数据可以正常显示问题是回显之后不能正常编辑，点击删除小图标也失效解决方法采用事件在事件中由于项目需求，在项目中使用用到了element中的select组件的多选功能（multiple），多选之后保存回显所选内容，从后端会拿到一个数组，...

dockerclub 2019-08-23 18:20 评论0 收藏0
Vue高效UI组件库—iView开发实践

摘要：它的文档也是相当详细，每个功能都配有详细说明和实例代码，直接复制就可以使用，我们也计划在明年启动英文文档翻译计划。明年会启动英文文档翻译计划，也希望喜欢和支持，同时英语不错的同学可以加入我们，一起参与翻译。前段时间在微软参加活动，分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验，现整理成文，和大家探讨。 showImg(htt...

wean 2019-08-21 14:43 评论0 收藏0
vue表格组件

摘要：基于的封装用于便捷的在中使用除过特性外，其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。非必设项，选中的过滤条件将会覆盖否为多选布尔值默认为。刷新更新查询条件其它更多请直接访问查看当前版本 GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外，其它API与GridM...

ysl_unh 2019-08-26 12:10 评论0 收藏0
一个vue的日历组件

一个vue calendar的npm组件说明： 1.基于element-ui开发的vue日历组件。 showImg(https://segmentfault.com/img/remote/1460000015420326?w=507&h=472); 地址更新: 1.增加value-format指定返回值的格式2.增加头部插槽自定义头部 {{ slotProps.todo}} ...

liuhh 2019-08-22 18:16 评论0 收藏0