vue 下拉框中显示el-tree树形控件

1 初步想法刚开始选用了el-select中在option里嵌套一个el-tree树形控件,发现有问题,当点击非文字区域或者框的时候,el-select中会出现错误信息,如下:

此问题没解决掉,就换了另一种思路,用el-input框模仿实现一个el-select下拉框方案,发现可行,解决方法效果图如下:

直接上代码,代码方法如下:

<template>
  <div v-clickoutside="handleClickOutside" style="width:200px">
    <el-input
      style="width:200px"
      v-model="carSelectParam"
      placeholder="请选择车辆"
      readonly
      @click.native="handleInput"
      :suffix-icon="icon"
    ></el-input>
    <div style="position:absolute;z-index: 3333;" v-show="treeShowFlag">
      <div class="aaa"></div>
      <div class="numberScreening">
        <div style="display:flex;flex-direction:row" class="traceScreeningMb">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model&#
  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据引用的描述,el-tree是一个vue-cli项目树形控件。它可以展示树形结构的数据,一级节点默认展开,并且支持增删改后局部刷新数据。通过点击确定按钮,可以局部刷新并渲染新的数据。 在引用提到了el-tree的安装方式和使用方法。可以通过npm install命令安装el-tree组件,并使用npm run serve命令进行开发编译和热重装,使用npm run build命令进行编译并最小化生成。 综上所述,el-tree是一个可以展示树形结构数据的vue-cli项目树形控件,支持增删改后局部刷新数据,并且可以通过npm安装和使用。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作](https://download.csdn.net/download/weixin_38542223/13125838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [el-tree-select:基于el-select和el-tree改造的树形选择器(下拉框)组件](https://download.csdn.net/download/weixin_42148053/18554569)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值