递归处理iview级联和树数据格式

级联

数据格式转换

iview级联要求的数据格式

[{
    value: 'beijing',
    label: '北京',
    children: [                
        {
            value: 'tiantan',
            label: '天坛'
        }
    ]
}]

现有的数据格式

[{
    code: 'beijing',
    name: '北京',
    list: [                
        {
            code: 'tiantan',
            name: '天坛',
            list: []
        }
    ]
}]

如果要使用iview的级联，就要把数据转换成上述要求的格式

递归处理

function convertTree (tree) {
    const result = [];
    tree.forEach((item) => {
        // 解构赋值并重命名
        let { code: value, name: label, list: children } = item;
        // 如果有子节点，递归
        if (children) {
            children = convertTree(children);
        }
        result.push({ value, label, children });
    })
    return result
}

优化复用

// map
{
    value: 'code',
    label: 'name',
    children: 'list'
}

function convertTree (tree, map) {
    const result = [];
    tree.forEach((item) => {
        // 读取 map 的键值映射
        let value = item[ map.value ];
        let label = item[ map.label ];
        let children = item[ map.children ];
        // 如果有子节点，递归
        if (children) {
            children = convertTree(children, map);
        }
        result.push({ value, label, children });
    })
    return result
}

提取放在工具类中

utils->recursion.js

const recursion = {
  convertTree: function (tree, map) {
    const result = [];
    tree.forEach((item) => {
        // 读取 map 的键值映射
        let value = item[ map.value ];
        let label = item[ map.label ];
        let children = item[ map.children ];
        // 如果有子节点，递归
        if (children) {
            children = this.convertTree(children, map);
        }
        result.push({ value, label, children });
    })
    return result
  },
}
export default recursion

树

utils->recursion.js

const recursion = {
  convertTree: function (tree, map) {
    const result = [];
    tree.forEach((item) => {
      // 读取 map 的键值映射
      let expand = false;
      let title = item[ map.title ];
      let children = item[ map.children ];
      // 如果有子节点，递归
      if (children) {
        children = this.convertTree(children, map);
      }
      result.push({ expand, title, children });
    })
    return result;
  },
}
export default recursion

组件

import recursion from '@/utils/recursion'
const map = {
  title: 'name',
  children: 'list'
}
const resultArr = recursion.convertTree(res.data, map)

作者：lesdom
链接：https://www.jianshu.com/p/f12a33d42244
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

<template>
    <div>
        <Breadcrumb>
            <BreadcrumbItem to="/">Home</BreadcrumbItem>
            <BreadcrumbItem to="/home">Components</BreadcrumbItem>
            <BreadcrumbItem to="/params">Breadcrumb</BreadcrumbItem>
        </Breadcrumb>
        <Card style="width: 100%">
            <Alert type="warning" show-icon>只允许为第三级分类设置相关参数！</Alert>
            <Col >
                <span class="choose-params">选择商品分类：</span>
                <Cascader :data="catelist" v-model="value1" class="cascader" @on-change="handleChange" ></Cascader>
            </Col>
            <Tabs value="name1">
                <TabPane label="动态参数" name="name1">标签一的内容</TabPane>
                <TabPane label="静态属性" name="name2">标签二的内容</TabPane>
            </Tabs>
        </Card>
    </div>
</template>
<script>
    export default {
        data () {
            return {
               map:{
                value: 'cate_id',
                label: 'cate_name',
                children: 'children'
               },
                catelist:[],
                text:'',
                value1: [],
               map: {
                value: 'code',
                label: 'name',
                children: 'list'
                }
               
            }
        },
        created(){
            this.getCateList()
        },
        methods: {
            handleChange (value, selectedData) {
                console.log('value--'+value+'--'+'selectData--'+JSON.stringify(selectedData))
                this.text = selectedData.map(o => o.label).join(', ');
                console.log(this.text)
            },
            // convertTree (tree) {
            //     const result = [];
            //     tree.forEach((item) => {
            //         // 解构赋值并重命名
            //         let { cat_id: value, cat_name: label, children: children } = item;
            //         // 如果有子节点，递归
            //         if (children) {
            //             children =this.convertTree(children);
            //         }
            //         result.push({ value, label, children });
            //     })
            //     //console.log(result)
            //     return result
                
            // },
             convertTree (tree) {
                const result = [];
                tree.forEach((item) => {
                    // 读取 map 的键值映射
                   // console.log('wq'+JSON.stringify(item))
                    let value = item.cat_id ;
                    let label = item.cat_name;
                    let children = item.children;
                    // 如果有子节点，递归
                    if (children) {
                        children = this.convertTree(children);
                    }
                    result.push({ value, label, children });
                })
                //console.log('wq'+result)
                return result
            },
            
             // 获取所有的商品分类列表
                async getCateList() {
                const { data: res } = await this.$http.get('categories')
                if (res.meta.status !== 200) {
                    return this.$message.error('获取商品分类失败！')
                }
                   // console.log(res.data)
                 this.catelist=this.convertTree(res.data)
                   //console.log(this.catelist)
                },
              
               
        }
    }
    
</script>
<style scoped>
    .cascader{
        width: 30%;
        margin-top: 15px;
    }
    .choose-params{
        margin-top: 15px;
    }
</style>