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

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

css 复制代码
@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
html 复制代码
<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" 
         placeholder="节点" 
         clearable 
         @clear="handleIptClear">
       </el-input>
  </el-popover>
</div>
javascript 复制代码
var Main = {
    data() {
      return {
        options: [
          {id:'1', name: '1',
           children:[
             {id:'11', name: '11'},
             {id:'12', name: '12'}
           ]
          },
          {id:'2', name: '2'}
        ],
        value:{id:'', name: ''}
        
      }
        
    },
    methods: {
      // 清空输入框内容
        handleIptClear(){
            this.$refs.tree.setCheckedNodes([])
            this.value.id = ''
            this.value.name = ''
        },
        // checkbox被选中或取消选中
        handleCheckChage(arg1, arg2, arg3){
            const seltedNodes = this.$refs.tree.getCheckedNodes()
            const ids = seltedNodes.map(n => n.id)
            const names = seltedNodes.map(n => n.name)
            this.value.id = ids
            this.value.name = names
        },
        // 节点被点击
        handleNodeClick(arg1, arg2, arg3){
            console.log('nodes:', arg1, arg2, arg3)
        },
    }
  };

var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

可以根据函数方法拿到里面的参数,实现多选节点效果

相关推荐
啃火龙果的兔子3 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
Zevalin爱灰灰8 分钟前
MATLAB GUI界面设计 第六章——常用库中的其它组件
开发语言·ui·matlab
「、皓子~31 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了34 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_36 分钟前
Ajax 入门
前端·javascript·ajax
前端开发与ui设计的老司机40 分钟前
数字孪生技术引领UI前端设计潮流:增强现实(AR)的集成应用
ui
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss