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
        }
    })
 },

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论 1

打赏作者

一颗黄果果

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值