基于vue.js实现移动端树形结构的封装

前言

前些日子做了一个pc端树形表格的功能，由于项目需要，移动端也要一个树形展示，虽然很不情愿，个人觉得在移动端做多级树结构不是不合理，操作也不方便，但是没办法，给产品交（si）流（bi）很久还是乖乖去做。

主要技术点：vue子组件的递归实现及相关样式的实现

话不多说，先看效果图（在线预览）（数据和树表格是同一个）：

注：上面这个iPhoneX效果图是用Devices.css实现的，模拟手机上显示效果。

代码实现

tree-list.vue页面负责接收主页面传递的数据，然后将数据通过initTreeData方法组合成树结构需要的格式。

    initTreeData() {
      // 临时储存数据
      let tempData = JSON.parse(JSON.stringify(this.list))
      let reduceDataFunc = (data, level) => {
        data.map((m, i) => {
          m.isExpand = m.isExpand || false
          m.children = m.children || []
          m.level = level
          if (m.children.length > 0) {
            reduceDataFunc(m.children, level + 1)
          }
        })
      }
      reduceDataFunc(tempData, 1)
      this.treeDataSource = tempData
    }

tree.vue子组件用于组件循环嵌套

<template>
  <li class="node list-item" data-type="0">
    <template v-if="root !==0 && nodes !== 1">
      <span class="line"></span>
    </template>
    <div class="contanier flex">
      <div class="small-panel flex">
        <span class="label">[负责人]</span>
        <span class="txt">{{model.ResponsibleName}}</span>
      </div>
      <div class="body-panel flex">
        <div class="title">
          <i v-if="HasChild" class="arrow" :class="isOpenOrClose" @click="openExpand(model)"></i>
          <i class="t-icon m-dep"></i>
          {{model.ObjectName}}
        </div>
        <div class="time">{{model.BelongTo}}天前</div>
      </div>
      <div class="bottom-panel flex">
        <div class="left-wrap flex">
          <span class="label">[工作经验]</span>
          |
          <span class="txt">{{model.Experience}}</span>
        </div>
        <div class="right-wrap">
          <span class="txt">{{model.CreateTime}}</span>
        </div>
      </div>
    </div>
    <template v-if="HasChild && this.model.isExpand">
      <ul class="box">
        <tree-item v-for="(m, i) in model.children" :key="String('child_node'+i)" :num='i' :root="1" @openExpand="openExpand" @delAction="delAction" :nodes.sync="model.children.length" :model.sync="m"></tree-item>
      </ul>
    </template>
  </li>
</template>

root=0是代表第一级，root=1是表示非第一级
nodes是表示子级的条数，这里主要用于一些样式（那条竖线）的控制
isExpand是否展开/折叠树默认false。此属性是在上述initTreeData方法中默认添加的
openExpand方法是用于处理树的展开/折叠
delAction方法用于删除（暂时没有实现）
HasChild是验证当前数据层级是否还有子级数据
isOpenOrClose根据当前isExpand返回是否展开/折叠后的样式名openorclose

 computed: {
    HasChild() {
      return this.model.children.length > 0
    },
    isOpenOrClose() {
      return this.model.isExpand ? 'open' : 'close'
    }
  }

更多代码请查阅ue-tree-table，有不懂的可以留言。

后续扩展

• 实现滑块效果，增加相关操作。
• 实现下拉刷新，上拉加载更多。
• 欢迎star，~~~