更新时间:2020-04-15 09:40:02
1 | npm i vue-search-tree |
先找到main.js引入插件并use
1 2 | import SearchTree from 'vue-search-tree'Vue.use(SearchTree) |
使用示例请参照Demo演示
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 源数据 | Array | 必填项 |
| node-key | 节点的唯一标识 | String | 'id' |
| search | 模糊搜索的关键词 | String | '' |
| empty-text | 内容为空时展示的文本 | String | '' |
| show-checkbox | 是否显示checkbox | Boolean | false |
| default-expand-all | 是否默认展开所有节点 | Boolean | false |
| expand-on-click-node | 点击节点时是否展开或折叠 | Boolean | true |
| check-on-click-node | 点击节点时是否选中节点 | Boolean | false |
| default-expanded-keys | 默认展开节点的keys | Array | [] |
| default-checked-keys | 默认选中节点的keys | Array | [] |
| props | 配置选项,请看下表 | Object |
| 参数 | 说明 | 类型 |
|---|---|---|
| name | 节点名称 | String |
| children | 节点的子集 | String |
| 事件名 | 说明 | 参数 |
|---|---|---|
| node-click | 节点被点击时触发 | 参数1: 事件参数event, 参数2: 当前node节点 |
| node-checked | 节点的选中状态改变时触发 | 参数1: 事件参数event, 参数2: 当前node节点 |
| node-expand | 节点展开或折叠时触发 | 参数1: 事件参数event, 参数2: 当前node节点 |
| 方法名 | 说明 | 参数 | 参数类型 | 返回值 |
|---|---|---|---|---|
| getNode | 通过key获取对应节点 | 参数1: 唯一标识key | String / Number | 成功返回对应的节点, 失败返回null |
| resetChecked | 取消所有节点的选中状态 | - | - | - |
| setCheckedKeys | 通过keys批量设置节点的选中状态 | 参数1: 唯一标识keys, 参数2: 状态 | 参数1: Array, 参数2: Boolean | - |
| getCheckedKeys | 获取选中节点的keys | - | - | 所有选中节点的唯一标识keys |
| getCheckedNodes | 获取选中的节点nodes | - | - | 所有选中的节点nodes |
| remove | 通过key删除一个节点 | 参数1: 唯一标识key或当前节点 | String / Number | 成功返回true, 失败返回false |
| append | 通过key添加一个子节点 | 参数1: 唯一标识key或当前节点, 参数2: node节点 | String / Number | 成功返回true, 失败返回false |
| insertBefore | 通过key在前添加一个兄弟节点 | 参数1: 唯一标识key或当前节点, 参数2: node节点 | String / Number | 成功返回true, 失败返回false |
| insertAfter | 通过key在后添加一个兄弟节点 | 参数1: 唯一标识key或当前节点, 参数2: node节点 | String / Number | 成功返回true, 失败返回false |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com