vue-treeselect

官网地址:www.vue-treeselect.cn/#flat-mode-…

介绍: vue-treeselect 是一个多选组件，具有对 Vue.js嵌套选项支持。

实际使用

引入多选组件

html代码

<treeselect v-model="formData.deptId" style="width: 99%" clearable size="small"
    :options="deptOptions" :defaultExpandLevel="3" :show-count="true"
    placeholder="请选择归属部门"/>

一.option选项

[1] data定义

dedeptOptions定义为数组

dedeptOptions:[],

[2] methods使用

1.定义方法getTreeselect, treeselect为接口

    getTreeselect() {
        treeselect().then((response) => {
            this.deptOptions = response.data;
        });
    },

2.接口拿到的形式:

3.并在created或mounted中添加该方法

    created() {
        this.getTreeselect();
    },

二.defaultExpandLevel

简意: 打开默认显示分支节点个数

加:是数字,不加:是字符串
该组件也许会自动转为数字型,故而加不加:皆可'

发现文档确实如此:

三.:show-count="true"

简意: 显示下分支个数