zoukankan      html  css  js  c++  java
  • vue-treeselect

    // 导入树options
    import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    然后声明此时未点击,此时为未加载状态
    var called = false
    <treeselect :options="options" :load-options="loadOptions" placeholder="Category" v-model="value" @input="categoryValueChange(value)" />
    async loadOptions ({
          action,
          parentNode,
          callback
        }) {
          // Typically, do the AJAX stuff here.
          // Once the server has responded,
          // assign children options to the parent node & call the callback.
          if (action === LOAD_ROOT_OPTIONS) {
            if (!called) {
              called = true
            } else {
              try {
                const res = await this.$apis.requestCategoryTree()
                var optionsList = []
                for (var i = 0; i < res.length; i++) {
                  var optionItem = {
                    id: res[i].id,
                    label: res[i].text,
                    children: null
                  }
                  optionsList.push(optionItem)
                }
                this.options = optionsList
                this.options.sort(function (x, y) {
                  return x.label > y.label ? 1 : -1
                })
              } catch (error) {
                console.log(error)
              }
            }
          }
          if (action === LOAD_CHILDREN_OPTIONS) {
            switch (parentNode.id) {
              case parentNode.id:
              {
                simulateAsyncOperation(() => {
                  this.requestTreeData(parentNode.id).then(response => {
                    parentNode.children = []
                    for (var i = 0; i < response.length; i++) {
                      var childrenItem = {
                        id: response[i].id,
                        label: response[i].text
                      }
                      parentNode.children.push(childrenItem)
                      // parentNode.children=[{
                      //     id: 'child',
                      //     label: 'Child option',
                      // }]
                    }
                  })
                  callback()
                })
                break
              }
              default:
                            /* empty */
            }
          }
        },

    这里是我自己写的可能有些模糊,看文档当然会更好理解

    https://vue-treeselect.js.org/
  • 相关阅读:
    使用Docker及k8s启动logstash服务
    在kubernetes上部署zookeeper,kafka集群
    k8s configmap 挂载配置文件
    k8s 安装 rabbitMQ 单机版
    aws 挂载efs (nfs)目录
    长白山游记
    RedHat 安装YUM软件
    mysql查询案例
    mysql子查询
    mysql联合查询
  • 原文地址:https://www.cnblogs.com/daicw/p/11347784.html
Copyright © 2011-2022 走看看