Vue apprécié des composants récursives pour obtenir l'instance de contrôle d'arbre ~

Je pense que deux jours pour préparer calqués sur vue-vue ant-conception basée sur une réalisation du contrôle des arbres. Les principaux composants utilisés dans la pensée récursive vue, utilisez le type d'entrée dans CheckBox la zone de saisie.

demande

• les données entrantes JSON peuvent être générés arborescence.
• Vous pouvez lancer le nœud sélectionné.
• Il peut être des noeuds sélectionnés manuellement, éventuellement imprimer tous les noeuds sélectionnés.
• Possibilité de désactiver l'initialisation de noeud.
• TreeView peut être plié.
• Modifier le style CheckBox natif.

Exemples Capture d'écran

Un bon contrôle de l'arbre comme illustré ci-dessous, cliquez pour clé de noeud Sélectionner affichera tous les noeuds sélectionnés:

Hands-réalisation

Vue comprendre l'ensemble récursion

Dans le document vue (https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E9%80%92%E5%BD%92%E7%BB%84%E4%BB% B6) est décrit des composants peuvent appeler leur propre dans leur propre modèle. Mais il avait besoin de deux conditions:

• Les composants ont un attribut name
• appel récursif nécessite une condition

Selon les instructions ci-dessus pour jeter les bases de la tree.vue de contrôle de l'arbre:

Les variables globales: global.js

Dans la composante écriture devient contenu du nœud se trouve car il est des composants récursives, chaque niveau n'est pas bon pour obtenir le nœud sélectionné. Voici donc global.js créer un enregistrement variable globale tous les noeuds sélectionnés. Aussi facile à enlever, et rejoindre les nœuds.
La valeur par défaut noeuds sélectionnés comme suit:

const nodes = ['1', '1-1', '1-1-2', '1-2-2']

export default {
  nodes
}

Main.js doivent monter sur le dos par écrit.

import global from 'common/js/global'
Vue.prototype.$global = global

Les composants de base (composants récursives): tree.vue

Remarque: Il n'y a pas besoin alors de se déclarer composants propriété, Une fois que vous avez l'attribut name dans le modèle peut appeler le composant nommé valeur de nom directement.

<template>
  <ul class="ul-wrapper">                                    <!-- 包裹层-->
    <li v-for="item in list" :key="item.key">                <!-- 遍历-->
      <div>                                                  <!-- 是否展开图标-->
          <img class="icon"
            v-show="item.children"
            @click="changeShow"
            :src="require(`../common/images/${imgUrl}`)"
          >                                                  <!-- CheckBox-->
        <input
          type="checkbox"
          :name="item.key"
          @click="clickbox"
          :checked="isChecked(item.key)"
          :disabled="item.disabled"
        >
        <div class="checkbox-title">{{item.title}}</div>      <!-- CheckBox内容-->
      </div>
      <tree v-if="showChildren" :list="item.children"></tree> <!-- 遍历children-->
    </li>
  </ul>
</template>

<script type='text/ecmascript-6'>
export default {
  name: 'tree',
  props: {
    list: { // 所有树节点
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      showChildren: true // 是否展开根目录
    }
  },
  computed: { // computed属性计算展开图标
    imgUrl () {
      return this.showChildren ? 'down.png' : 'right.png'
    }
  },
  methods: {
    clickbox (e) { // 点击CheckBox时需要加入或删除已选中this.$global.nodes的节点数组中
      const checked = e.target.checked
      const key = e.target.name
      const nodes = this.$global.nodes // this.$global.nodes是全局变量，便于递归组件记录选中节点
      if (checked) {
        if (!nodes.includes(key)) {
          this.$global.nodes.push(key)
        }
      } else {
        this.$global.nodes = nodes.filter((item) => {
          return key !== item
        })
      }
    },
    changeShow () { // 点击是否展开根目录，当前状态取反即可
      this.showChildren = !this.showChildren
    },
    isChecked (key) { // 查看是否已经存在于选中节点中
      return this.$global.nodes.includes(key)
    }
  }
}
</script>

<style lang="stylus">
.ul-wrapper                            // ul包裹层，每层需要向右偏移30px
  margin 10px 30px 0
  .checkbox-title, .icon
    display inline-block
    vertical-align middle
  .icon
    margin-left -20px
    height 18px
    width 18px

input[type="checkbox"]                  // CheckBox样式修改
  position relative
  display inline-block
  vertical-align middle
  padding 0
  margin-right 5px
  height 18px
  width 18px
  border 1px solid #ccc
  border-radius 3px
input[type="checkbox"]:checked::before // CheckBox选中状态时样式修改
  position absolute
  top 0
  left 0
  padding-left 2px
  content: "\2713";
  height 15px
  width 13px
  font-size 12px
  font-weight: bold;
  background #1296db
  color #fff
  border-radius 3px
  border 0
input[type="checkbox"]:disabled::before // CheckBox禁用状态时样式修改
  position absolute
  top 0
  left 0
  padding-left 2px
  content: "";
  height 15px
  width 13px
  font-size 12px
  font-weight: bold;
  background #ccc
  color #fff
  border-radius 3px
  border 0
</style>

composant Application arbre apply.vue

<template>
  <div class="tree-wrapper">
    <div class="btn" @click="showNodes">
      点击获取选中节点key
    </div>
    <Tree :list="treeData"></Tree>
  </div>
</template>

<script type='text/ecmascript-6'>
import Tree from 'base/tree'
export default {
  data () {
    return {
      treeData: []  // 全部节点
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.axios.get('/tree').then((res) => { // 获取mock数据
        this.treeData = res.data
      })
    },
    showNodes () {
      alert(this.$global.nodes)
    }
  },
  components: {
    Tree
  }
}
</script>

<style lang="stylus">
.btn
  margin 20px
  text-align center
</style>

tree.json de données fictives

utilise ici une méthode de données analogiques, les maquettes d'utilisation spécifique à moi d'écrire un « mieux-scroll vue d'atteindre carrousel de l'assemblage » en référence à: https: //blog.csdn.net/qq_39083496/article/details / 104 259 280

• Que ce soit désactivé est basé CheckBox sur la « désactivé »: « true », décision.
• titre (doit être) à afficher un nom d'étiquette.
• clé (être) est la véritable clé pour comprendre les champs nécessaires pour la dernière fois du dépôt.

[{
    "title": "1",
    "key": "1",
    "children": [
        {
            "title": "1-1",
            "key": "1-1",
            "children": [
                { "title": "1-1-1", "key": "1-1-1" },
                { "title": "1-1-2", "key": "1-1-2" },
                { "title": "1-1-3", "key": "1-1-3" }
            ]
        }, 
        {
            "title": "1-2",
            "key": "1-2",
            "children": [
                { "title": "1-2-1", "key": "1-2-1" },
                { "title": "1-2-2", "key": "1-2-2" },
                { "title": "1-2-3", "key": "1-2-3" }
            ]
        }, 
        {
            "title": "1-3",
            "key": "1-3"
        }
    ]
  }, 
  {
    "title": "2",
    "key": "2",
    "disabled": "true",
    "children": [
        { "title": "2-1", "key": "2-1" },
        { "title": "2-2", "key": "2-2" },
        { "title": "2-3", "key": "2-3" }
    ]
  }, 
  {
    "title": "3",
    "key": "3"
  }]

Interface:

const Mock = require('mockjs')

Mock.mock('/tree', 'get', require('./json/tree.json'))

résumé

Ceci termine la génération du contrôle des arbres, des demandes ont été partiellement respectées. Si vous ne pouvez pas comprendre l'extrait de code ci - dessus, vous pouvez trouver le code source sur mon GitHub. Bienvenue, bienvenue ~ Étoile
https://github.com/Gesj-yean/vue-demo-collection