欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue-treeselect的自定义部分说明和使用心得

程序员文章站 2022-03-02 09:06:59
在vue中出现了各种各样的框架,vue-treeselect就是vue的树选择;就是基于vue的多选组件在平常的情况下一般我把vue-treeselect再次封装一遍为自己业务提供便利当然它的功能还是有很多的例如:单选、多选、模糊搜索、清除等等不说废话了直接看代码吧咱们来一个一个说明一下吧首先命名一个树的名字,到时候组件调用的时候好调用也就是name之后是透传的参数和数据配置props组件肯定是子的嘛,props中的东西都是可以从父级里面透传过来的template就是我所需...

在vue中出现了各种各样的框架,vue-treeselect就是vue的树选择;就是基于vue的多选组件

在平常的情况下一般我把vue-treeselect再次封装一遍为自己业务提供便利

当然它的功能还是有很多的例如:单选、多选、模糊搜索、清除等等

不说废话了直接看代码吧

vue-treeselect的自定义部分说明和使用心得

咱们来一个一个说明一下吧

首先命名一个树的名字,到时候组件调用的时候好调用也就是name

之后是透传的参数和数据配置props组件肯定是子的嘛,props中的东西都是可以从父级里面透传过来的

template就是我所需要的的vue-treeselect的组件模板

data就是我子组件的数据参数

当然在这个TgElTreeSelect你还可以放入methods、vue中的生命周期、计算属性、侦听器等等

props中的透传的参数

vue-treeselect的自定义部分说明和使用心得

props里面可以有数据value也就是初始化的数据,dataList就是你的接口数据,接下来的就是你选择之后渲染的属性和上传的属性了,说的直白一点就是下拉中的label和value当然上面对应的就是我的labelField和selectField,之后的属性就是树形折叠属性,

defaultExpandLevel就是从哪一级来时折叠展开,
defaultExpandAll就是全部展开或者折叠
multiple是否为多选
disabled这个就是可选择与不可选择
validateEvent验证必填与不必填的属性
clearable是否有清除的属性

当然我也把我完整的代码粘出来

vue-treeselect的自定义部分说明和使用心得

vue-treeselect的自定义部分说明和使用心得

vue-treeselect的自定义部分说明和使用心得

当然给一个说明呗在这里我使用了requirejs通过define的属性也就是所谓的AMD来再次封装这个组件,首页先npm安装vue-treeselect

npm install --save @riophae/vue-treeselect
Vue.component('treeselect', VueTreeselect.Treeselect)

上面的这句代码就是下载完之后引入treeselect

当然官网上的更全面详细的可以看看官网的再研究研究

本文地址:https://blog.csdn.net/lixu_boke/article/details/107531061