<template>
<div>
<el-form :model="formData" ref="refFormData" label-width="180px">
<el-form-item label="景点" prop="location_id">
<el-select v-model="formData.location_name" placeholder="请选择" style="width: 430px;background: #fff" ref="selectRefs" :popper-append-to-body="false" fixed>
<el-input placeholder="输入关键字搜索" v-model="filterText" suffix-icon="el-icon-search" @click.stop.native class="sel-input" v-if="testData.length !== 0">
</el-input>
<el-option :value="formData.location_name" :label="formData.location_name" class="sel-option">
<el-tree :data="testData" :props="testDataProps" node-key="allName" default-expand-all highlight-current accordion @node-click="handleNodeClick" :filter-node-method="filterNode" ref="testDataTree">
<template #default="{ node, data }">
<div class="custom-tree-node">
<span class="pl-1">{{data.allName}}</span>
</div>
</template>
</el-tree>
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'name',
props: {
},
data () {
return {
formData: {
location_id: '',
location_name: '华夏集团有限公司'
},
filterText: '', // 获取关键字信息
testDataProps: [{//value,label根据接口返回的数据修改
value: 'code',
label: 'allName',
children: 'children'
}],
testData: []
};
},
created () {
this.getData()
},
methods: {
getData () {
axios.get('https://api.oioweb.cn/api/SoulWords').then(res => {
if (res.data && res.data.code == 200) {
console.log(res.data.result.content, '获取响应');
this.testData = [
{
"code": "1064",
"allName": "华夏集团有限公司",
"usciCode": "9111000071093107XN",
"delFlag": "0",
"createTime": "2017-07-07 09:07:17",
"updateTime": "2023-12-23 02:12:19",
"fstBoard": null,
"secBoard": null,
"thrBoard": null,
"forBoard": null,
"country": "156",
"province": "110000",
"adminUnit": "AAAA",
"rightUnit": "AAAA",
"contactPerson": "夏",
"contactTel": "15110012159",
"adminUnitName": null,
"rightUnitName": null,
"internalFlag": null,
"unitLevel": "1",
"tempFlag": "1",
"orgType": "151",
"registCptl": 37000000000,
"gnrtAst": 822220000000,
"setDate": "2023-12-25 00:00:00",
"opRng": "=====",
"registAddr": "11111地址",
"maxholder": "11100000000019545B",
"filler": "夏",
"phoneNum": "15110012159",
"dayidx": "2023-11-30 00:00:00",
"children": [
{
"code": "1003",
"allName": "华夏集团财务有限公司",
"usciCode": "91110000117783037M",
"delFlag": "0",
"createTime": "2017-08-16 09:08:50",
"updateTime": "2023-12-23 02:12:22",
"fstBoard": null,
"secBoard": null,
"thrBoard": null,
"forBoard": null,
"country": "156",
"province": "110000",
"adminUnit": "1064",
"rightUnit": "1064",
"contactPerson": "夏小夏",
"contactTel": "010-83568002",
"adminUnitName": "华夏集团有限公司",
"rightUnitName": "华夏集团有限公司",
"internalFlag": "1",
"unitLevel": "1",
"tempFlag": "1",
"orgType": "160",
"registCptl": 5541117395,
"gnrtAst": 73639820632,
"setDate": "2023-12-25 00:00:00",
"opRng": "=====",
"registAddr": "11111地址",
"maxholder": "9111000071093107XN",
"filler": "夏小夏",
"phoneNum": "010-83568002",
"dayidx": "2023-11-30 00:00:00",
"children": null
},
]
}
]
this.$nextTick(() => {
//默认展开选中第一个
this.$refs.testDataTree.setCurrentKey(this.testData[0].allName);
})
}
});
},
filterNode (value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
handleNodeClick (data) {
this.formData.location_id = data.code
this.formData.location_name = data.allName
this.$refs.selectRefs.blur() // 收起下拉框
}
},
watch: {
'filterText' (val) {
this.$refs.testDataTree.filter(val)
}
}
};
</script>
<style lang='scss' scoped>
// 修改下拉树重新下拉滚动条不在最顶部问题
::v-deep .el-select-dropdown__wrap.el-scrollbar__wrap {
max-height: none !important;
}
::v-deep .el-select-dropdown .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
max-height: 274px;
padding: 0;
height: auto;
overflow: auto;
}
// 修改下拉树重新下拉滚动条不在最顶部问题结束
.sel-input {
width: 94%;
margin-left: 3%;
text-align: center;
}
</style>