一、基本使用
1. 界面效果
2. 代碼實(shí)現(xiàn)
<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. 問(wèn)題1：下拉框占滿整個(gè)屏幕
1）問(wèn)題效果
2）理想效果
3）完整代碼
說(shuō)明：設(shè)置 dropdownStyle（ 下拉菜單樣式 ），添加如下代碼，高度可自己調(diào)整。
: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. 問(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-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>
二、數(shù)據(jù)回顯、滾動(dòng)條定位
1. 界面效果
說(shuō)明：將上次選中的內(nèi)容回顯，默認(rèn)展開該節(jié)點(diǎn)及父節(jié)點(diǎn)，并將滾動(dòng)條自動(dòng)定位到選中的節(jié)點(diǎn)。
2. 代碼實(shí)現(xiàn)
思路：1）設(shè)置默認(rèn)展開節(jié)點(diǎn)
treeDefaultExpandedKeys2）將滾動(dòng)條定位到選中節(jié)點(diǎn)處
2.1 獲取默認(rèn)展開節(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ù)據(jù)
(item) => {
return {
id: item.class_name // id對(duì)應(yīng)的字段名
}
},
{
children: 'subclasses', // 子數(shù)組對(duì)應(yīng)的字段名
mapChildren: 'children' // 子數(shù)組格式化后的名稱
}
)
// 2.找到節(jié)點(diǎn)路徑
let data = XEUtils.findTree(newTree, (item) => item.id === id)
// 3.獲取默認(rèn)展開節(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方法文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-627711.html
- api
- 返回?cái)?shù)據(jù)展示：
2.2 設(shè)置滾動(dòng)條定位
2.2.1 注意：找到選中后的樣式名，見下圖。
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-627711.html
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-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.獲取回顯數(shù)據(jù)
this.name = '國(guó)外花鍵軸磨床'
// 2.獲取默認(rèn)展開節(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è)置展開的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>
到了這里，關(guān)于a-tree-select 基本使用，下拉框高度和寬度設(shè)置、回顯時(shí)滾動(dòng)條定位解決。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
