1.0.2 • Published 2 years ago
remote-tree v1.0.2
remote-tree
功能
- 拓展 el-tree 组件,懒加载模式,可通过接口远程搜索,以达到过滤节点的效果
- 增加节点双击事件,双击节点默认会展开节点
安装
npm install remote-tree
引用
import Vue from "vue"
import App from './App'
import RemoteTree from "remote-tree"
import "remote-tree/index.css"
Vue.use(RemoteTree)
new Vue({
el: '#app',
render: h => h(App)
})
使用
<template>
<remote-tree
ref="tree"
tree-height="calc(100vh - 300px)"
:input.sync="filterText"
:remote-lazy-search="true"
node-key="id"
:expand-on-click-node="false"
:load="loadNode"
lazy
:props="defaultProps"
highlight-current
:remote-filter-method="remoteFilterMethod"
@node-single-click="handleSingleClick"
@node-double-click="handleDoubleClick"
/>
</template>
<script>
data() {
return {
filterText: "",
defaultProps: { children: "children", label: "label" },
};
},
methods: {
// 通过接口搜索
remoteFilterMethod() {
return new Promise((resolve, reject) => {
api
.getTreeInfo()
.then((res) => {
// res 为 tree 数据
resolve(res.data);
})
.catch((err) => {
reject(err);
});
});
},
// 节点单击事件
handleSingleClick(data, node, vueComponent) {
console.log("sigle click");
},
// 节点双击事件
handleDoubleClick(data, node, vueComponent) {
console.log("double click");
},
loadNode(node, resolve) {
api
.getTreeInfo()
.then((res) => {
resolve(res.data);
})
.catch((err) => {
reject(err);
});
},
}
</script>
props
属性 | 说明 | 默认 |
---|---|---|
suffix | 搜索输入框后置图标 | el-icon-search |
prefix | 搜索输入框后置图标 | 无 |
placeholder | - | 请输入关键字 |
clearable | 是否显示清楚图标 | true |
input | 输入框输入的内容 | 无 |
treeHeight | 树的高度 | 200px |
preventDoubleClick | 是否阻止双击事件 | false |
remoteSearch | 是否开启远程搜索 | false |
remoteSearch | 是否开启远程搜索 | false |
remoteLazySearch | 是否开启懒加载远程搜索 | false |
remoteFilterMethod | 远程搜索方法 | function() {} |
其它 | 继承 el-tree 的属性 | - |