属性配置
| 属性 | 含义 | 备注 |
|---|
| :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>javascript">
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>
