Vue:Treeselect基本使用

官网

属性配置

属性 含义 备注
: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>
相关推荐
不想上班只想要钱9 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌9 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静10 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿10 小时前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端
533_10 小时前
[css] flex布局中的英文字母不换行问题
前端·css
浮游本尊10 小时前
React 18.x 学习计划 - 第四天:React Hooks深入
前端·学习·react.js
future_studio10 小时前
聊聊 Unity(小白专享、C# 小程序 之 日历、小闹钟)
前端·html
Yeats_Liao11 小时前
Go Web 编程快速入门 · 04 - 请求对象 Request:头、体与查询参数
前端·golang·iphone
祈祷苍天赐我java之术11 小时前
Redis 数据类型与使用场景
java·开发语言·前端·redis·分布式·spring·bootstrap
草莓熊Lotso12 小时前
C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战
前端·c++·python·selenium