Table des matières
1. Utilisation de base
1. Effets d'interface
2. Mise en œuvre du code
<template>
<div>
<div class="box">
<a-tree-select
v-model="name"
:replaceFields="replaceFields"
:tree-data="treeData"
class="tree-select"
>
</a-tree-select>
</div>
</div>
</template>
<script>
import {
getPkProperty } from '@/api/process-cfg/process-cfg.js'
export default {
data() {
return {
replaceFields: {
children: 'subclasses',
title: 'dsp_class_name',
key: 'class_name',
value: 'class_name'
},
treeData: [],
name: ''
}
},
created() {
this.getSortData()
},
methods: {
async getSortData() {
let result = await getPkProperty()
this.treeData = result.subclasses
}
}
}
</script>
<style>
.box {
margin: 100px;
width: 500px;
height: 500px;
}
.tree-select {
width: 200px;
}
</style>
3. Problème 1 : la liste déroulante occupe tout l'écran
1) Effet problème
2) Effet idéal
3) Code complet
Description : Définissez le dropdownStyle (style de menu déroulant), ajoutez le code suivant, la hauteur peut être ajustée par vous-même.
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
<template>
<div>
<div class="box">
<a-tree-select
v-model="name"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:replaceFields="replaceFields"
:tree-data="treeData"
class="tree-select"
>
</a-tree-select>
</div>
</div>
</template>
<script>
import {
getPkProperty } from '@/api/process-cfg/process-cfg.js'
export default {
data() {
return {
replaceFields: {
children: 'subclasses',
title: 'dsp_class_name',
key: 'class_name',
value: 'class_name'
},
treeData: [],
name: ''
}
},
created() {
this.getSortData()
},
methods: {
async getSortData() {
let result = await getPkProperty()
this.treeData = result.subclasses
}
}
}
</script>
<style>
.box {
margin: 100px;
width: 500px;
height: 500px;
}
.tree-select {
width: 200px;
}
</style>
4. Problème 4 : Lorsque le contenu du menu est trop long, la largeur du menu déroulant devient infiniment plus large.
1) Effet problème
2) Effet idéal
Description : Elle a la même largeur que la zone de texte et une barre de défilement horizontale apparaîtra lorsque le contenu est trop long.
3) Code complet
Description : Définissez le dropdownMatchSelectWidth (le menu déroulant et le sélecteur ont la même largeur).
:dropdownMatchSelectWidth="true"
<template>
<div>
<div class="box">
<a-tree-select
v-model="name"
:dropdownMatchSelectWidth="true"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:replaceFields="replaceFields"
:tree-data="treeData"
class="tree-select"
>
</a-tree-select>
</div>
</div>
</template>
<script>
import {
getPkProperty } from '@/api/process-cfg/process-cfg.js'
export default {
data() {
return {
replaceFields: {
children: 'subclasses',
title: 'dsp_class_name',
key: 'class_name',
value: 'class_name'
},
treeData: [],
name: ''
}
},
created() {
this.getSortData()
},
methods: {
async getSortData() {
let result = await getPkProperty()
this.treeData = result.subclasses
}
}
}
</script>
<style>
.box {
margin: 100px;
width: 500px;
height: 500px;
}
.tree-select {
width: 200px;
}
</style>
2. Écho des données, positionnement de la barre de défilement
1. Effets d'interface
Description : Faites écho au dernier contenu sélectionné, développez le nœud et son nœud parent par défaut et positionnez automatiquement la barre de défilement sur le nœud sélectionné.
2. Mise en œuvre du code
Idée : 1) Définir le nœud développé par défaut
treeDefaultExpandedKeys2) Positionner la barre de défilement sur le nœud sélectionné
2.1 Obtenir le nœud étendu par défaut
Idée :
1) D'après la clé du nœud sélectionné, retrouver les clés de tous les nœuds parents de ce nœud. La méthode encapsulée dans la bibliothèque xe-utils est utilisée ici .
2) PuisquefindTreela méthode a un format de données spécifié, nous devons formater les données (clé : id, enfant : 'enfants'), et le côté droit est celui formaté.
3) La méthode de formatage estmapTree.
2.1.1 Mise en œuvre du code
getExpandKeys(id) {
// 1.数据格式化
let newTree = XEUtils.mapTree(
this.treeData, // 格式化树数据
(item) => {
return {
id: item.class_name // id对应的字段名
}
},
{
children: 'subclasses', // 子数组对应的字段名
mapChildren: 'children' // 子数组格式化后的名称
}
)
// 2.找到节点路径
let data = XEUtils.findTree(newTree, (item) => item.id === id)
// 3.获取默认展开节点
this.treeDefaultExpandedKeys = data.nodes.map((item) => item.id)
}
2.1.2 Descriptif
1) méthode mapTree
- API
- Données formatées : uniquement l'identifiant (clé), le sous-tableau est constitué d'enfants
2) méthode findTree
- API
- Affichage des données de retour :
2.2 Définir le positionnement de la barre de défilement
2.2.1 Remarque : recherchez le nom du style sélectionné, voir la figure ci-dessous.
2.2.2 Mise en œuvre du code
setTimeout(() => {
this.treeDefaultExpandedKeys = data.nodes.map((item) => item.id)
}, 500)
setTimeout(() => {
if (
document.getElementsByClassName('ant-select-tree-node-selected')
.length > 0
) {
document
.getElementsByClassName('ant-select-tree-node-selected')[0]
.scrollIntoView()
}
}, 1000)
3. Code complet
<template>
<div>
<div class="box">
<a-tree-select
v-model="name"
:dropdownMatchSelectWidth="true"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:replaceFields="replaceFields"
:treeDefaultExpandedKeys="treeDefaultExpandedKeys"
:tree-data="treeData"
class="tree-select"
v-if="treeData.length > 0"
>
</a-tree-select>
</div>
</div>
</template>
<script>
import {
getPkProperty } from '@/api/process-cfg/process-cfg.js'
import XEUtils from 'xe-utils'
export default {
data() {
return {
replaceFields: {
children: 'subclasses',
title: 'dsp_class_name',
key: 'class_name',
value: 'class_name'
},
treeData: [],
name: '',
treeDefaultExpandedKeys: []
}
},
async created() {
await this.getSortData()
await this.echoData()
},
methods: {
async getSortData() {
let result = await getPkProperty()
this.treeData = result.subclasses
},
async echoData() {
// 1.获取回显数据
this.name = '国外花键轴磨床'
// 2.获取默认展开节点
this.getExpandKeys(this.name)
},
getExpandKeys(id) {
// 1.数据格式化
let newTree = XEUtils.mapTree(
this.treeData,
(item) => {
return {
id: item.class_name
}
},
{
children: 'subclasses',
mapChildren: 'children'
}
)
// 2.找到节点路径
let data = XEUtils.findTree(newTree, (item) => item.id === id)
// 3.设置展开的key
setTimeout(() => {
this.treeDefaultExpandedKeys = data.nodes.map((item) => item.id)
}, 500)
setTimeout(() => {
if (
document.getElementsByClassName('ant-select-tree-node-selected')
.length > 0
) {
document
.getElementsByClassName('ant-select-tree-node-selected')[0]
.scrollIntoView()
}
}, 1000)
}
}
}
</script>
<style>
.box {
margin: 100px;
width: 500px;
height: 500px;
}
.tree-select {
width: 200px;
}
</style>