vue使用element-ui el-input+el-tree

最新推荐文章于 2024-08-15 16:00:44 发布

_大菜鸟_

最新推荐文章于 2024-08-15 16:00:44 发布

阅读量1.4k

点赞数 2

文章标签： 1024程序员节 vue.js

本文链接：https://blog.csdn.net/weixin_46463643/article/details/109261618

版权

本文介绍了如何在Vue项目中使用Element-UI的el-input和el-tree组件，实现树形下拉框选择数据，并将所选值显示在input输入框中，提供了一个实现该功能的简单示例。

摘要由CSDN通过智能技术生成

简介：主要为树形下拉框选择数据对应input展示值

效果图：
在这里插入图片描述

html

     <el-form :v-model="form">
        <el-form-item>
          <el-input
            placeholder="请选择菜单分类"
            class="selectTree-input"
            auto-complete="off"
            v-model="form.inputText"
            @click.native="changeSelectTree()"
            @blur="hideParentClick"
          >
          </el-input>
          <el-button @click="getnodeText">获取node文本</el-button>
          <el-tree
            id="floatTree"
            v-show="isShowSelect"
            empty-text="暂无数据"
            node-key="id"
            :default-expand-all="false"
            :data="data"
            :filter-node-method="filterNode"
            show-checkbox
            @check="handleCheck"
            @node-click="selectClassfy"
            ref="selectTree"
            class="selectTree-tree"
            :props="defaultProps"
          >
          </el-tree>
        </el-form-item>
      </el-form>