Vue + ElementUi 实现input树型下拉框

code chage word

于 2019-01-19 20:29:50 发布

阅读量8.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue+elementUi

本文链接：https://blog.youkuaiyun.com/mibi8840/article/details/86556452

本文介绍了如何使用Vue.js和ElementUI库创建一个具有树形结构的下拉框，该下拉框在输入框中输入时能够智能匹配并显示相关树节点。详细内容包括页面所需要素的说明，关键的JavaScript代码实现，以及为了达到理想效果所添加的页面样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面效果：

1、页面要素：

<!-- 树形下拉框  -->
<template>
 <el-form :v-model="form" size="mini" >
    <el-row>
     <el-col :span='12'>
       <el-form-item label="选择菜单分类" >
        <el-input
             placeholder="请选择菜单分类"
             class="width-220 selectTree-input"
             auto-complete="off"
             v-model="form.input1"
             @click.native="changeSelectTree()"
             @blur="hideParentClick"
        >
        </el-input>
        <el-tree id="floatTree"
            v-show="isShowSelect"
            empty-text="暂无数据"
            :highlight-current = true
            :default-expand-all = false
            :expand-on-click-node="true"
            :data="data"
            :filter-node-method="filterNode"
            @node-clic