vue实现下拉树——vue-treeselect

vue实现下拉树——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
        }
    })
 },