element-ui 实现输入框下拉树组件（2024-05-23）

最新推荐文章于 2025-01-07 18:10:28 发布

宝子卡粉

最新推荐文章于 2025-01-07 18:10:28 发布

阅读量637

点赞数 1

CC 4.0 BY-SA版权

分类专栏： element-ui 前端开发文章标签： elementui 前端 ui

本文链接：https://blog.youkuaiyun.com/hap1994/article/details/139135160

用element-ui的 el-input，el-tree，el-popover组件组合封装

@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>

<div id="app">
  <el-popover
    placement="bottom"
    width="350"
    trigger="click">
    <el-tree
       style="width:300px"
       ref="tree"
       :data="options"
       :check-strictly="false"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[]"
        :default-checked-keys="[]"
        :props="{
           children: 'children',
           label: 'name'
         }"
         @check-change="handleCheckChage"
         @node-click="handleNodeClick"
     >
    </el-tree>

        <el-input slot="reference" 
          style="width:380px"
         v-model="value.name" 
         place