0
点赞
收藏
分享

微信扫一扫

Vue:Treeselect基本使用

千妈小语 2024-08-20 阅读 8

官网

属性配置

属性含义备注
: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>

举报

相关推荐

0 条评论