vueに基づく.js移動端ツリー構造のパッケージングを実現

テキストリンク:https://juejin.im/post/5b88b8586fb9a01a125039ae
前言
先日pcエンドツリーテーブルの機能を作りましたが、プロジェクトの必要性のため、モバイルエンドもツリー展示をしなければなりません.いやですが、個人的にはモバイルエンドでマルチレベルツリーを作るのは合理的ではなく、操作も不便だと思いますが、仕方なく、製品に長い間渡していました.
主な技術点: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は第1段を表し、root=1は非第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へようこそ~~~