vue实现下拉树——vue-treeselect

vue实现下拉树——vue-treeselect

官网入口：vue-treeselect
里面提供了各种api，本章只简单介绍如何引用此组件以及一些简单功能。

npm下载安装插件指令

npm install --save @riophae/vue-treeselect

下面是我的一个例子

<template>
	<TreeSelect 
		v-model="treeValue" 
		:multiple="true" 
		:options="treeOptions"/>
</template>

<script>
    import {getProductCatrgory} from "@/api/index";
    import TreeSelect from '@riophae/vue-treeselect';   //引用下拉树组件
    import '@riophae/vue-treeselect/dist/vue-treeselect.css';
    export default {
        name: "testTreeSelect",
        components: {TreeSelect},
        data() {
        	return {
        		treeOptions: [], 	//下拉树数据
        		treeValue: [],        //下拉树框内值
        	}
        },
        methods: {
			getTreeData() {
				//调用后台接口查找数据
                getCatrgoryTree().then(res => {
                	this.treeOptions = res.data.list;
                }).catch(err => {
                    console.log(err);
                });
            },
		},
		mounted() {
            this.getTreeData();
        },
	}
</script>

<style scoped>
   
</style>

这棵树默认的数据结构是：

{
    "id" : "",
    "label" : "",
    "children" : []
}

特别需要注意的是，如果当前分类下面没有子分类的话，要把children删掉，还有鉴于后台接口返回的数据未必会有label属性，所以有的时候还需要给树的每个label赋值，下面是我用递归处理的

//递归树结构
recursiveTree(tree) {
	//格式化：清掉空的children，将title换成label
    tree.map(item => {
        item.label = item.title;
        if (item.children) {
            item.children.map(child => {
                child.label = child.title;
            });
            this.recursiveTree(item.children);
        } else {
            delete item.children
        }
    })
 },

然后在获得后台返回数据的时候调用这个方法就可以了。懒得加注释了，有不懂的或者觉得哪儿有不足的欢迎大家留言。