关于vue.js:vuetreeselect踩坑一

vue 联合 treeselect 踩坑一

1. 开发环境 vue.js
2. 电脑系统 windows 10 专业版
3. 在开发的过程中, 咱们可能依据需要可能会应用到 treeselect, 对于 treeselect 本次我应用的是 vue 的, 感兴趣的小伙伴能够间接百度 官网, 地址是:

https://www.vue-treeselect.cn/#events

4. 上面我简略的说一下在 vue 上面中如何应用 treeselect。

 第一步: 要先装置, 命令如下:
npm install --save @riophae/vue-treeselect
第二部 在 vue 模板中进行导入

// import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  
第三步: 在 components 中进行注册
第四步: 依据需要在 vue 模板中增加如下代码:

<treeselect v-model="vv" :options="chentrees" :multiple="true" :normalizer="normalizer" />

// 解释阐明: vv 是在 return 上面进行定义的;chentrees

//normalizer 在 methods 中增加如下代码:
// 上面这段代码是要害 ----- 请留神
/** 转换机构数据结构 */
      normalizer(node) {if (node.children && !node.children.length) {
          delete node.children;
          console.log("我是 return 之前的 node");
          console.log(node);
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        };
        console.log("我是 return 上面的 node");
        console.log(node);
      },

5. 点击 treeselect 大略效果图如下:

// 这就是 在 vue 中 treeselect 的用法, 更多办法大家能够参考官网。
6. 在我的项目中, 咱们心愿咱们 选中 treeselect 的某条数据的时候, 在这条数据的 id 传给后盾, 这个怎么实现呢?

 整体思路: 应用 watch 监听 v-model 绑定的值, 只有这个值一发生变化, 咱们就输入。具体代码如下:
第一步:
在和 methods 的同级增加如下代码:
watch:{'vv':"treebianhua"}

第二部: 在 methods 中增加如下代码:

treebianhua(val){console.log("我是新的 treeselect 的值");
        console.log(val);
        console.log(val[0]);
      },
// 你会发现这个 val[0] 就是这条数据对应的 id, 而后你把这个 id 在存一下, 点击的时候传给后盾就能够啦。因为怎么向后盾传值太过简略啦, 置信大家看到这个中央的小伙伴都会, 所以我就不再做对应的办法啦。// 代码解释阐明, 只有 v-model 绑定的值 vv 一发生变化就调用 treebianhua 这个办法。

7. 本期的教程到了这里就完结啦, 是不是感觉跟 nice, 是不是很棒! 让咱们一起致力走向巅峰!