您现在的位置是：网站首页> 编程资料编程资料

Vue实现无限级树形选择器_vue.js_

2023-05-24 447人已围观

简介 Vue实现无限级树形选择器_vue.js_

前言：

想要在 Vue 中实现一个这样的无限级树形选择器其实并不难，关键点在于利用 递归组件 和 高阶事件监听，下面我们就一步步来实现它。

简单实现下样式

创建 Tree.vue 组件（为方便阅读，代码有省略）：

展开收缩我们使用 CSS 来创建一个三角形:

.triangle { width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid grey; transition: all 0.1s; left: 6px; margin: 6px 0 0 0; }

然后定义一个展开时的 class，旋转角度调整一下定位：

.caret-down { transform: rotate(90deg); left: 2px; margin: 9px 0 0 0; }

由于每个节点控制展开闭合的变量都是独立的，为了不污染数据，这里我们定义一个对象 tapScopes 来控制就好，记得使用 $set 来让视图响应变化:

// 当点击三角形时，图标变化： changeStatus(index) { this.$set(this.tapScopes, index, this.tapScopes[index] ? (this.tapScopes[index] === 'open' ? 'close' : 'open') : 'open') }

递归渲染

现在我们只渲染了第一层数据，如何循环渲染下一级数据呢，其实很简单，往上面 TODO 的位置插入组件自身即可（相当于引入了自身作为 components），只要组件设置了 name 属性，

Vue 就可以调用该组件，：

  •  // .... some code ....

    • Mock.js

    export default { stat: 1, msg: 'ok', data: { list: [ { key: 1, title: '一级机构部门', children: [ { key: 90001, title: '测试机构111', children: [ { key: 90019, title: '测试机构111-2', }, { key: 90025, title: '机构机构', children: [ { key: 90026, title: '机构机构-2', }, ], }, ], }, { key: 90037, title: '另一个机构部门', }, ], }, { key: 2, title: '小卖部总舵', children: [ { key: 90037, title: '小卖部河边分部', }, ], }, ], }, }

    调用组件：

    到此这篇关于Vue实现无限级树形选择器的文章就介绍到这了,更多相关Vue选择器内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

    您可能感兴趣的文章:

    上一篇：vue对象的深度克隆方式_vue.js_

    下一篇：Vite打包分割代码的详细过程记录_vue.js_

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网