官网
属性配置
| 属性 | 含义 | 备注 |
|---|
| :options | 数据列表 | 数据格式一定要与下面的对应起来 |
| :multiple | 是否多选 | 当多选的时候，接收参数一定要定义成列表类型 |
| searchable | 可搜索 | |
| :limitText | 显示每一组的数量 | |
| :disable-branch-nodes | 禁止选中父级 | |
案例
<template>
<div class="app-container">
<treeselect class="my-treeselect-container" v-model="queryParams.id" :options="dataOptions" :multiple="true" search-nested searchable :limit="1" :limitText="count => `+${count}`" placeholder="产品配置" :appendToBody="true" style="width: 220px;" :disable-branch-nodes="true"/>
</div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: '',
components: { Treeselect },
data() {
return {
queryParams: {id: []},
dataOptions: [{label: '一班', id: '1-1', children: [{label: "张三", id: 1}, {label: "李四", id: 2}, {label: "张三", id: 3}]}],
}
},
mounted(){
},
methods: {
}
}
</script>
