前言
-
最近在开发时遇到一个问题,是在输入框里面放一个树形组件。查看饿了吗之后发现都不太适合
-
最后在网上搜了一下,真的是有相关的组件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组件使用(下拉框树形结构) 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!
什么不足的地方请大家指出谢谢 -- 風过无痕