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