一、基本使用

1. 界面效果

2. 代碼實(shí)現(xiàn)

<template><div><div class="box"><a-tree-selectv-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. 問(wèn)題1：下拉框占滿(mǎn)整個(gè)屏幕

1）問(wèn)題效果

2）理想效果

3）完整代碼

說(shuō)明：設(shè)置 dropdownStyle（ 下拉菜單樣式 ），添加如下代碼，高度可自己調(diào)整。 :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"

<template><div><div class="box"><a-tree-selectv-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. 問(wèn)題4：菜單內(nèi)容過(guò)長(zhǎng)時(shí)，下拉菜單寬度無(wú)限變寬。

1）問(wèn)題效果

2）理想效果

說(shuō)明：與文本框同寬，內(nèi)容過(guò)長(zhǎng)時(shí)出現(xiàn)橫向滾動(dòng)條。

3）完整代碼

說(shuō)明：設(shè)置 dropdownMatchSelectWidth （下拉菜單和選擇器同寬）。:dropdownMatchSelectWidth="true"

<template><div><div class="box"><a-tree-selectv-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>

二、數(shù)據(jù)回顯、滾動(dòng)條定位

1. 界面效果

說(shuō)明：將上次選中的內(nèi)容回顯，默認(rèn)展開(kāi)該節(jié)點(diǎn)及父節(jié)點(diǎn)，并將滾動(dòng)條自動(dòng)定位到選中的節(jié)點(diǎn)。

2. 代碼實(shí)現(xiàn)

思路：1）設(shè)置默認(rèn)展開(kāi)節(jié)點(diǎn) treeDefaultExpandedKeys 2）將滾動(dòng)條定位到選中節(jié)點(diǎn)處

2.1 獲取默認(rèn)展開(kāi)節(jié)點(diǎn)

思路：
1）根據(jù)選中節(jié)點(diǎn)的key，找到這個(gè)節(jié)點(diǎn)的所有父節(jié)點(diǎn)的key。這里用的是 xe-utils 庫(kù)里封裝好的方法。
2）由于 findTree 方法有指定的數(shù)據(jù)格式，所以我們需要將數(shù)據(jù)格式化（key:id，child：‘children’），右側(cè)是格式化后的。
3）格式化方法為 mapTree。

2.1.1 代碼實(shí)現(xiàn)

getExpandKeys(id) {// 1.數(shù)據(jù)格式化let newTree = XEUtils.mapTree(this.treeData, // 格式化樹(shù)數(shù)據(jù)(item) => {return {id: item.class_name // id對(duì)應(yīng)的字段名}},{children: 'subclasses', // 子數(shù)組對(duì)應(yīng)的字段名mapChildren: 'children' // 子數(shù)組格式化后的名稱(chēng)})// 2.找到節(jié)點(diǎn)路徑let data = XEUtils.findTree(newTree, (item) => item.id === id)// 3.獲取默認(rèn)展開(kāi)節(jié)點(diǎn)this.treeDefaultExpandedKeys = data.nodes.map((item) => item.id)
}

2.1.2 說(shuō)明

1） mapTree 方法

• api
  
• 格式化后數(shù)據(jù)：只有id（key），子數(shù)組為 children
  

2） findTree方法

• api
  
• 返回?cái)?shù)據(jù)展示：
  

2.2 設(shè)置滾動(dòng)條定位

2.2.1 注意：找到選中后的樣式名，見(jiàn)下圖。

2.2.2 代碼實(shí)現(xiàn)

 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)

三、完整代碼

<template><div><div class="box"><a-tree-selectv-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.獲取回顯數(shù)據(jù)this.name = '國(guó)外花鍵軸磨床'// 2.獲取默認(rèn)展開(kāi)節(jié)點(diǎn)this.getExpandKeys(this.name)},getExpandKeys(id) {// 1.數(shù)據(jù)格式化let newTree = XEUtils.mapTree(this.treeData,(item) => {return {id: item.class_name}},{children: 'subclasses',mapChildren: 'children'})// 2.找到節(jié)點(diǎn)路徑let data = XEUtils.findTree(newTree, (item) => item.id === id)// 3.設(shè)置展開(kāi)的keysetTimeout(() => {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>