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