高级组件封装技巧--tree的封装

el-tree是一个经常用到的组件,但是它不支持v-model,使用起来很麻烦,这篇教程封装了el-tree,使得它使用起来很简单,并且支持搜索,支持叶子节点横向排列,这样就算数据多了,也会显的很紧凑,同时它支持提交halfCheck节点,这点在做菜单管理的时候很有用,如果数据中不保存halfCheck,你需要向上遍历父节点,但是保存了父节点在回显的时候会有问题,因为只要父节点选中子节点都会选中,这些在组件封装中都做了处理

高级组件封装技巧--tree的封装_第1张图片

组件的封装 






组件的使用

node-key就是绑定值,如果要form绑定id就传id,组件默认显示label,子节点保存在children里面,如果要变更可以通过:props="{label:'title',children:'children'}"来实现



你可能感兴趣的:(前端,vue.js,elementui,javascript)