【vue-treeselect】数据量大的时候懒加载并且可以搜索，树懒加载+搜索

这两天快被这个懒加载加搜索搞崩溃了
今天小有收获，后面优化了再更新
主要说一下一棵树如何懒加载和搜索
1、ref不解释了，和本次代码无关
2、normalizer格式化内容不重要
3、load-options很关键
4、 @search-change="itemInput"很关键
5、 @open="itemopen(rowIndex)"重要
6、@close="itemClose(rowIndex)"重要
7、 @keydown.native="assetTreeKeydownFun"很关键
8、 :async="Isasync"很关键
9、（优化） :default-expand-level=“defaultLevel”
10、（优化） open-direction=“bottom”
11、 （优化）@keyup.native=“assetTreeKeyupFun($event)”

<TreeSelect
                  :ref="'treeselect' + rowIndex"
                  v-model="row.assetTypeCode"
                  :options="deptOptions"
                  :normalizer="normalizer"
                  clearable
                  no-options-text="暂无可用选项"
                  noChildrenText="数据加载中"
                  noResultsText="暂无匹配项"
                  loadingText="数据加载中"
                  :matchKeys="['name', 'code']"
                  no-results-text="没有匹配的搜索结构"
                  placeholder="请选择资产分类名称"
                  searchPromptText="正在搜索"
                  style="width: 100%"
                  :appendToBody="true"
                  :disable-branch-nodes="true"
                  :load-options="Isasync ? asyncOptions : loadOptions"  
                  @search-change="itemInput"
                  @open="itemopen(rowIndex)"
                  @keydown.native="assetTreeKeydownFun"
                  @close="itemClose(rowIndex)"
                  @select="node => treeHandleSelect(rowIndex, node)"
                  :async="Isasync"
                   :default-expand-level="defaultLevel"
                   open-direction="bottom"
                    @keyup.native="assetTreeKeyupFun($event)"
                >
                  <div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
                    [{{ node.raw.code }}]{{ node.raw.label }}
                  </div>
                  <div slot="value-label" slot-scope="{ node }">{{ row.assetTypeCode ? `[${row.assetTypeCode}]` : '' }}{{ row.assetTypeName }}</div>
                </TreeSelect>

2、文档很重要
延迟加载就是懒加载

异步搜索就是搜索功能

两个事件都用到了loadOption，那怎么触发，何时触发，以什么形式触发，光是这几点就花了我好长时间去研究。

肯定要有一个判断条件来决定何时触发哪个事件
关键就在于async是否启用异步搜索模式

有了这个就好办了，肯定不能默认为true，这样就不会走懒加载了，那就得找触发事件了

如果开启，就搜索，不开启就懒加载
:load-options="Isasync ? asyncOptions : loadOptions"

先在data中定义一下：

Isasync: false,
 defaultLevel: 0,

重要的就是open、close和search-change事件，我试过input，这个事件不会触发，不知道要加什么条件才能触发，不过不要紧，用search-change事件就可以
在用户搜索的时候打开异步搜索模式，这个有点缺陷，写到这才想起来，这个方法应该删掉才对，因为它是搜索到后才触发，会有个bug，就是第一次的时候不查，第二次的时候才触发，后来换成keydown，键盘按下就触发，就没这个bug了，所以改成下面这个
错误示范：

 itemInput(value) {
      this.Isasync = true  
    },

正确示范：优化点 this.defaultLevel = 5，当搜索到内容的时候，只展开一级，要点击才会一层一层展开，但是这里要的效果是全部展开，我默认给了5，如果还有很深的层级就写的再大一点

 assetTreeKeydownFun() {
      this.Isasync = true
       this.defaultLevel = 5
    },

为了不影响懒加载的正常使用，菜单打开和关闭的时候都要关掉异步加载，默认展开为0

    itemopen(index) {
      this.Isasync = false
      this.defaultLevel = 0
    },
    itemClose(index) {    
      this.Isasync = false
      this.defaultLevel = 0
    },

当清空输入框的时候遇到一个bug，无内容的时候还是显示正在搜索中，这个时候用键盘抬起事情
关闭懒加载

  assetTreeKeyupFun(e) {
      if (!e.target.value) {
        this.Isasync = false
        this.defaultLevel = 0
      }
    },

这里要注意一下，搜索是要后台配合的，后台把查到的数据直接返给我们，我们拿来直接用就行，我这里还遇到一个问题，就是查到的只有code没有label，尽管树插件的插槽里显示的是label，但是normalizer格式化的时候是把name转换成label的，在异步搜索这里好像没有走格式化，必须是label有值才行，后端把label和name都赋同样的值后，就可以正常显示了。

 normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.code,
        label: node.name,    
        children: node.children,
      }
    },

如果后端返的内容不是树结构的，那就得自己处理成树结构的，用递归或别的，因为我直接就能拿到了，就懒得不写那一步啦

// treeselect树异步搜索
    asyncOptions({ action, searchQuery, callback }) {  
      if (action === ASYNC_SEARCH) {   
        findTreeselect({ searchValue: searchQuery }).then(res => {          
          const options = res.data.map(i => ({
            id: i.id,
            code: i.code,
            label: i.name,
            children: i.children,
          }))
          callback(null, options)
        })
      }
    },

树懒加载和树搜索是两个完全不同的接口，懒加载第一次请求的是根节点，传id后才拿到对应的子节点
所以页面初始化的时候就要调一次

// 获取根节点树数据
    getTreedata() {
      lazyTreeselect().then(res => {
        // this.deptOptions = res.data
        for (let index of res.data) {
          let modeInfo = {}
          modeInfo.id = index.id
          modeInfo.code = index.code
          modeInfo.label = index.name
          modeInfo.name = index.name       
          modeInfo.children = null
          this.deptOptions.push(modeInfo)
        }
      })
    },

 //treeselect 树懒加载
    loadOptions({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        //加载点击节点的 子节点
        lazyTreeselect({ code: parentNode.code }).then(response => {
          let arr = []
          for (let index of response.data) {
            let chiledModeInfo = {}
            chiledModeInfo.id = index.id
            chiledModeInfo.code = index.code
            chiledModeInfo.label = index.name
            chiledModeInfo.name = index.name
            chiledModeInfo.children = null
            if (index.hasLeaf == '1') {
              delete chiledModeInfo.children
            }
            arr.push(chiledModeInfo)
          }
         
          parentNode.children = arr
        })
        callback()
      }
 
    },

结尾：需求搞出来之后，还是有点想哭的赶脚，前两天完全卡住了，写的也有问题，页面频发触发接口，不停的调，页面都奔溃过好几次。
放了两天之后，今天重新搞起来，还是稳住自己，沉下心去想。

有问题随时欢迎交流