vue自定义tree树组件

组件内容

<template><div class="tree-box"><divclass="tree-box-content"v-for="nodeItem in data":key="nodeItem.code"><div class="notetitle"><spanclass="icon"@click="childClick(nodeItem)"v-if="nodeItem.children.length"><i :class="nodeItem.open? 'el-icon-minus' : 'el-icon-plus'" /></span><span @click="childClick(nodeItem)"><span class="text">{{ nodeItem[title] }}</span></span></div><divv-if="nodeItem.children && nodeItem.children.length > 0 && nodeItem.open"><myTree:data="nodeItem.children":title="title":fatherNode="nodeItem":value="value"></myTree></div>
</template>
<script>export default {name: "myTree",props: {// 数据data: {type: Array,},// 节点展示的标签对象属性键名title: {type: String,default: "title",},// 树节点表示的值的键名value: {type: String,default: "value",},// 父级节点fatherNode: {type: Object,},},methods: {// 当前组件节点点击事件childClick(nodeItem) {nodeItem.open= !nodeItem.open;// 用于更新节点数据this.$forceUpdate();},}}
</script><style lang='scss' scoped>.tree-box {width: 100%;height: 100%;overflow-y: auto;padding-left: 30px;}.notetitle {display: flex;align-items: center;font-size: 18px;line-height: 36px;}.text:hover {color: #fff;}
</style>

父组件使用

<template><div style="width: 400px;height: 700px;"><myTree :data="data" /></div>
</template><script>
import myTree from "myTree/index.vue";
export default {components: { myTree },data(){data: [{open: false,title: '张三',code: 1,children: []}],}
}
</script>

如果后端没给open字段，就自己添加

let a = function (arr) {for (let i = 0; i < arr.length; i++) {arr[i].open = false;if (arr[i].children.length > 0) {a(arr[i].children);}}
};
for (let i = 0; i < this.data.length; i++) {this.siteList[i].open = false;a(this.data[i].children);
}

vue自定义tree树组件相关推荐

php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...
Vue自定义InputNumber 计数器组件
1.为什么要自己封装一个InputNumber 计数器组件? 因为原始的el-element的el-input-number组件有问题: 原生组件能输入英文,不能限制只能输入数值: 原始组件能通过键盘 ...
Vue 自定义多选组件
Vue 自定义多选组件子组件(选项卡) checkBoxCard.vue <template><div class="checkBoxCard">< ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
vue 自定义键盘组件_使用Vue自定义数字键盘组件的方法
这篇文章主要介绍了关于使用Vue自定义数字键盘组件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 inp ...
Element tree树组件鼠标双击事件
需求双击 tree上的子节点,把节点文字显示在输入框中(这里简化一下,双击 tree 显示文字即可,省略 $emit 那一步) 注解:props 可以接收 defaultExpandAll(是否默认 ...

vue自定义tree树组件

vue自定义tree树组件相关推荐

最新文章

热门文章