关于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,是不是很棒!让咱们一起致力走向巅峰!