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 文档