LkL拜客生活常识网

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

简单实现下样式

创建 Tree.vue 组件（为方便阅读，代码有省略）：LkL拜客生活常识网

展开收缩我们使用 CSS 来创建一个三角形:LkL拜客生活常识网

.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，旋转角度调整一下定位：LkL拜客生活常识网

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

LkL拜客生活常识网

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

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

递归渲染

现在我们只渲染了第一层数据，如何循环渲染下一级数据呢，其实很简单，往上面 TODO 的位置插入组件自身即可（相当于引入了自身作为 components），只要组件设置了 name 属性，Vue 就可以调用该组件，：LkL拜客生活常识网

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