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>
相关推荐
Setsuna_F_Seiei7 分钟前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发
黄毛火烧雪下18 分钟前
高效的项目构建和优化之前端构建工具
前端
90后的晨仔1 小时前
在 macOS 上轻松获取 GIF 图片总时长:多种实用方法详解
前端
技术钱1 小时前
vue3前端解析excel文件
前端·vue.js·excel
mapbar_front1 小时前
顺利通过试用期:避开三大陷阱,掌握三个关键点
前端·面试
韩立学长1 小时前
【开题答辩实录分享】以《智慧校园勤工俭学信息管理系统的设计与实现》为例进行答辩实录分享
vue.js·spring boot·微信小程序
掘金安东尼1 小时前
Transformers.js:让大模型跑进浏览器
开发语言·javascript·ecmascript
why技术1 小时前
1K+Star的开源项目能给一个在校大学生带来什么?
前端·人工智能·后端
@PHARAOH1 小时前
HOW - localstorage 超时管理方案
前端·javascript·vue.js
im_AMBER2 小时前
React 05
开发语言·前端·javascript·笔记·学习·react.js·前端框架