Vue- Treeselect component use (drop-down box tree structure)

foreword

• Recently, I encountered a problem during development, which was to put a tree component in the input box. After checking whether you are hungry, I found that it is not suitable

• Finally, I searched on the Internet and found that there is really a related component Treeselect, and there are indeed related articles explaining it, but it is quite messy.

• Record it here, Treeselect is used globally

Code

1. Download the package

npm install treeselect -S

2. Register as a global component to be used in many places - remember to introduce it in main.js for the first time (the homepage article has it)

// 输入框树形组件
import Treeselect from '@riophae/vue-treeselect'
export default {
  // install全局引入 vue中一个方法
  // 第1个参数是标签名称，第2个参数是一个选项对象
  install (Vue) {
    // 注册组件
    Vue.component('Treeselect', Treeselect)
  }
}

3. main.js import style

// 下拉框全局组件样式
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

4. Page structure - value bound by deptID

<treeselect
          style="width: 220px;"
          v-model="deptID"
          :options="deptOptions"
          :normalizer="normalizer"
          placeholder="选择维保班组"
   />

5. data data

data() {
    return {
      // 绑定值
      deptID:null,
      // 树结构选择数据
      deptOptions: []
    }
}

6.methods method - equivalent to tree tree structure configuration

methods:{
  // 树结构格式配置-跟element Tree树结构配置项一样
      normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },
}

---

Summarize:

After this process, I believe you also have a preliminary deep impression on the use of Vue-Treeselect components (drop-down box tree structure), but the situation we encounter in actual development is definitely different, so we need to understand it The principle is always the same. Come on, hit the workers!

Please point out any deficiencies, thank you -- Fengguowuhen