select-remote-tree

安装

npm install select-remote-tree -S

引用

import Vue from "vue"
import App from './App'
import SelectRemoteTree from "select-remote-tree"
import "select-remote-tree/index.css"

Vue.use(SelectRemoteTree)

new Vue({
  el: '#app',
  render: h => h(App)
})

使用

<template>
  <select-tree
    :load="loadNode"
    :props="defaultProps"
    node-key="id"
    @node-click="handleNodeClick"
    @remote-search="handleSearch"
  />
</template>
<script>
  data() {
    return {
      defaultProps: { children: "children", label: "label" },
    };
  },
  methods: {
    loadNode(node, resolve) {
      api.getTreeInfo().then(res => {
        resolve(res.data);
      });
    },
    handleSearch(name, resolve) {
      api
        .getTreeInfo({ name })
        .then(res => resolve(res.data));
    },
    handleNodeClick(data, node, vueComponent, resolve) {
      resolve(); // 收起 tree
    },
  }
</script>

Props

| 属性 | 说明 | 默认 | | :----- | :----- | :----- | | props | el-tree 树的 props | { children: "children", label: "label" } | | label | 选中选项的文本标题 | 无 | | nodeKey | el-tree 树的 nodeKey | id | | load | el-tree 树的 加载函数 | function () {} |

相关文档

el-select

el-tree