Vue：Treeselect基本使用

Monly212024-08-20 15:11

官网

属性配置

属性	含义	备注
:options	数据列表	数据格式一定要与下面的对应起来
:multiple	是否多选	当多选的时候，接收参数一定要定义成列表类型
searchable	可搜索
:limitText	显示每一组的数量
:disable-branch-nodes	禁止选中父级

案例

html 复制代码

<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>