别人写好的轮子,会用即可
首先,需要安装依赖,npm install --save @riophae/vue-treeselect
如果使用npm 不行 那么就使用 yarn add --save @riophae/vue-treeselect
然后在使用的地方引入即可
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
最后就是对照文档改为自己想要的样式了
不过需要注意树形数据的写法,分支结点和叶结点写法不同,对照文档来看
<!-- <treeselect
name="demo"
:multiple="true" 多选,true:打开,false:关闭
:clearable="clearable" 可清除(框框尾部的叉号),true:可清除,false:不可清除,默认值为true
:searchable="searchable" 模糊搜索:默认值为true
:disabled="disabled" 不能使用:默认值为false
:open-on-click="openOnClick" 点击打开,默认值为true
:open-on-focus="openOnFocus" 获得焦点打开,默认值为true
:clear-on-select="clearOnSelect" 清除选择,默认值为true
:close-on-select="closeOnSelect" 关闭选择框的时机:在选完一个选项之后就关闭,因此适用于单选时
:always-open="alwaysOpen" 一直打开选择框,并展开所有的子级,默认值为false
:append-to-body="appendToBody" 添加到主题 默认值为false
:options="options" 数据
rtl: false, RTL模式 展开按钮放在右侧,默认是在左侧的,默认值为false
:limit="3" 限制所选项的显示。多余的被隐藏在limitText字符串中,多选适用
:max-height="200" 弹出的选择框的最大高度
:limitText="count => `+${count}`" 自定义提示文字,默认就是 and x more
:load-options="loadOptions" 懒加载,适用于数据量很大的情况,需要对分支节点做一些修改
:async="true" 异步搜索
v-model="value"
:disable-branch-nodes="true" 禁用分支结点
有时候会遇到一些小BUG,就是当menuOptions没有数据时,页面初始化后会在选择框里显示:(unknown) ,问题就在于queryParams.activity_group_id值不能写为"",要写成null
/> -->