项目上遇到需要在下拉框展示树结构以供选择的情况,在实现的过程中出现下拉树选中不回填、添加时回填但编辑时不回填、必填校验一直存在等坑,现总结最终方案如下:
父组件
html部分
<el-form-item label="所属机构" prop="orgName">
<el-select ref="belongSelect" style="width:100%" v-model="dialogForm.orgName" placeholder="请选择所属机构">
<el-option :value="dialogForm.orgName" :label="dialogForm.orgName" hidden>
</el-option>
<CheckTree @tClick="handleNodeClickBelong"></CheckTree>
</el-select>
</el-form-item>
js部分
data() {
return {
dialogForm: {
orgName: '',
},
rules: {
orgName: [
{ required: true, message: '请选择所属机构', trigger: 'change' }
]
}
}
},
methods:{
handleNodeClickBelong(data) {
this.dialogForm.orgId = data.id
this.dialogForm.orgName = data.orgName
this.$refs.belongSelect.blur()
},
}
子组件
<template>
<div>
<el-tree :node-key="defaultProps.value" v-loading="loading" highlight-current class="filter-tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" ref="tree" :default-expand-all="istrue">
</el-tree>
</div>
</template>
<script>
import { reqGetOrgDirtory } from '@/api/role-manage'
export default {
name: 'CheckTree',
data() {
return {
loading: true,
defaultProps: {
value: "id",
label: "orgName",
children: "child",
},
treeData: [],
};
},
created() {
this.getOrgDirtory()
},
methods: {
async getOrgDirtory() {
await reqGetOrgDirtory().then(res => {
if (res.data.code == 200) {
this.treeData = res.data.obj
this.loading = false
}
})
},
async handleNodeClick(data, node, event) {
this.$emit('tClick', data)
},
},
}
</script>