Vue- Treeselect组件使用（下拉框树形结构）

前言

最近在开发时遇到一个问题，是在输入框里面放一个树形组件。查看饿了吗之后发现都不太适合
最后在网上搜了一下，真的是有相关的组件Treeselect，确实有相关文章说明，但是比较乱。
在这里记录一下，Treeselect全局使用

代码实现

1.下包

npm install treeselect -S

2.注册为全局组件很多地方要用-第一次记得在main.js中引入（主页文章有）

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

3.main.js引入样式

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

4.页面结构-deptID绑定的值

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

5.data数据

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

6.methods方法-相当于tree树结构配置

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

总结：

经过这一趟流程下来相信你也对 Vue- Treeselect组件使用（下拉框树形结构）有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕

Vue- Treeselect组件使用（下拉框树形结构）

前言

猜你喜欢