VUE+element三级联动或树形菜单获取最后一项,并加入到表格中

yeyan1996 发布于2019-08-26 10:28 / 1295人阅读

摘要：如下图要实现的功能如下勾选三级联动的材料勾选最后一级的材料把勾选的材料信息动态添加到下面表格中数据三级联动数据材料键值对选中的材料从后台获取三级联动数据调用封装的函数把最后一项添加到函数中获取最后一级材料函数遍历材料树如果有下级材料就一直

如下图,要实现的功能如下,勾选三级联动的材料,勾选最后一级的材料,把勾选的材料信息动态添加到下面表格中

1 data数据

return {
    options:[],              // 三级联动 数据
    optionsObj : {}           //{id: item}  材料id键值对
    clList: [],            //  选中的材料


}

2 从后台获取三级联动数据

  getDataTrees(){ 
    this.startLoading()
    this.$post("/api/pc/CategoryController/getCategoryAreaTree", {},data=>{
    console.log("TCL: getInit -> data", data,6766)
        this.options=data.tree
        
     
        this.optionsObj = this.getLastTree(this.options, {})        //调用封装的函数 把最后一项添加到函数中
        
        
    })
},

3 获取最后一级材料函数

  getLastTree(arr, obj){
    arr.map(item => {        //遍历材料树 如果有下级材料,就一直调用函数循环,没有就就向 0bj 对象中添加最后一项
        if(item.children){
            this.getLastTree(item.children, obj)
        }else{
            obj[item.id] = item
            // item.children = []
        }
    })
    return obj
},

4 三级联动多选事件

changeSelectTree(val){
    let ids = []
    this.clList = []        //每次调用初始化 clList 里的值
    
    val.map(item => {
        ids.push(item[item.length-1])        //把选中的最后一项的id添加到 ids 数组中
    })
    ids.map(item => {
        this.clList.push(this.optionsObj[item])   // 循环选中的每一项,在optionsObj 对象中找到 并添加到 clList数组中
    })
    console.log( this.clList)
    this.dialogVisibleTableData02=this.deepClone(this.clList)
},

混合云私有云三级联动菜单 js中获取表格数据树形菜单二级树形菜单

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

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

使用vue+element ui 实现省市区三级联动

摘要：使用实现省市区三级联动开发工具使用技术效果图如下话不多说上代码一，页面部分二，部分首先引入以下代码注意引入上方代码之前需先运行下方代码进行安装然后再写入以下代码这样一个省市区三级联动的下拉列表就完成了 ...

netScorpion 2021-11-11 16:54 评论0 收藏0
vue项目中使用element-ui下拉框选项值为对象时报错

摘要：在做后台管理时，使用了搭配，请求方法使用了插件，在使用下拉框时，因为我需要获取选中的选项中的其他值，因此需要传入对象。在做后台管理时，使用了vue搭配elementUI，请求方法使用了axios插件，在使用下拉框时，因为我需要获取选中的选项中的其他值，因此需要传入对象。对select下拉框的文档没有读的很仔细，百度过几篇文章，也没有理解他们表达的意思，然后自己又去看文档，把他的属性看...

Drummor 2019-08-26 10:57 评论0 收藏0
angular三级联动组件编写，树形组件

摘要：总部东北总部辽宁东北东南总部总部遍历取出数据解析多个层级数据一维数据解析成树形，如本来就为树形结构，忽略此步骤同函数同种功能临时变量写法自定义指令，编写成组件隔离作用域隔离和父的双向绑定单向父属性值改变时，的值也会跟这改变，但是 JS Bin ul { list-style: none; } .text-field { c...

testHs 2019-08-20 15:09 评论0 收藏0
vue+element tree(树形控件数据格式)组件(1)

摘要：树形控件数据格式组件最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。让我来记录这个树形组件的编写过程和期间用到的知识点。 vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。各位前辈帮我解决问题，才勉强搞定。让我来记录这个树形组件的编写过程和期间用到的知识点。首先说说需求，就是点击出现弹窗+蒙板...

Pines_Cheng 2019-08-02 16:05 评论0 收藏0
vue+element tree(树形控件数据格式)组件(1)

摘要：树形控件数据格式组件最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。让我来记录这个树形组件的编写过程和期间用到的知识点。 vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。各位前辈帮我解决问题，才勉强搞定。让我来记录这个树形组件的编写过程和期间用到的知识点。首先说说需求，就是点击出现弹窗+蒙板...

wangdai 2019-08-23 11:56 评论0 收藏0