el-tree和el-select实现下拉树选择

效果;

 

html代码

<el-select
    v-model="selectTree"
    placeholder="请选择..."
    size="mini"
    clearable
    ref="select"
>
    <el-option hidden key="id" :value="selectTree" :label="selectName" />
    <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        ref="tree"
        node-key="id"
    >
    </el-tree>
</el-select>

el-option的selectName用来显示选择的数据(远大公司)，value保存远大公司的id

js代码

// 报警类型
let alarmTypeList = ref([])

// 下拉树
const select = ref() 
let selectTree = ref('')
let selectName = ref('') 
let treeData = ref([]) // 树数据，接口获得
const defaultProps = ref({
    label: 'name',
    children: "children"
})
const handleNodeClick = (data) => {
    searchForm.orgId = data.id; //  给表单数据项赋值
    selectName.value = data.name; // 框中显示值为label
    select.value.blur() // 关闭下拉窗
}