如果默认有选中值,那么这个必不可少
this.$nextTick(()=>{
this.currentKey = data.code
this.$refs['tree'].setCurrentKey(this.currentKey)
})
<template>
<div v-loading="loading" class="region-tree">
<div class="region-tree-search">
<el-input v-model="searchForm.name" placeholder="请输入区划名称" maxlength="50" />
<el-button
style="margin-left: 15px;"
type="primary"
:loading="loading"
@click="handleSearch"
>查询</el-button>
</div>
<div class="region-tree-wrap">
<div class="region-tree-wrap-width">
<el-tree
class="tree"
ref="tree"
:data="treeData"
:props="treeProps"
node-key="code"
:expand-on-click-node="false"
:filter-node-method="filterNode"
default-expand-all
:highlight-current="true"
:current-node-key="currentKey"
@node-click="handleNodeClick"
/>
</div>
</div>
</div>
</template>
<script>
import { getRegionTree } from '@/api/system/dept'
export default {
name: 'RegionTree',
props: {
value: {
type: Object,
default: () => ({})
},
fetchFn: { // 请求接口函数
type: Function,
default: () => []
}
},
data() {
return {
loading: false,
searchForm: {
name: ''
},
treeProps: {
children: 'children',
label: 'desc'
},
treeData: [],
currentKey: ''
}
},
created() {
this.fetchRegionTree()
},
methods: {
handleSearch() {
this.$refs.tree.filter(this.searchForm.name)
},
handleNodeClick(data) {
if (data.level === 6) {
this.$emit('input', { code: data.code, desc: data.desc })
this.$emit('change')
}
},
fetchRegionTree() {
this.loading = true
getRegionTree({})
.then(res => {
this.treeData = res.data || []
if (this.treeData[0] == 1) { // level: 6
let data = this.treeData[0]
this.handleNodeClick(data)
this.$nextTick(()=>{
this.currentKey = data.code
this.$refs['tree'].setCurrentKey(this.currentKey)
})
}
this.loading = false
})
.catch(e => {
this.loading = false
})
},
// 筛选节点
filterNode(value, data) {
if (!value) return true
return data.desc.indexOf(value) !== -1
}
}
}
</script>
<style lang="scss" scoped>
.region-tree {
position: relative;
height: calc(100vh - 145px);
width: 270px;
padding-top: 50px;
&-search {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
height: 30px;
/*margin-bottom: 20px;*/
}
&-wrap {
height: calc(100vh - 195px);
overflow: auto;
&-width {
width: 500px;
}
}
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
color: #0066FF !important;
}
</style>
网友评论