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 的属性	-

el-tree 文档