<template>
<!-- 需求:通过点击<el-input> 将<el-tree>树型结构打开,选中<el-tree>某个值显示在<el-input>里面(中文),点击搜索将<el-input>的值传给后台,后台需要中文对应的id;前端显示中文,后台传入Number -->
<div class="demo">
<el-input placeholder="前端显示中文" v-model="demoString" value-key=demoNumber @click.native="getTree"></el-input>
<el-tree :data="data" :props="defaultProps" node-key=id @node-click="handleNodeClick" v-show="closeTree" default-expand-all></el-tree>
</div>
</template>
<script>
export default {
name: 'demo',
data() {
return {
demoString: '',
closeTree: false,
data: [{
id: 1,
label: '一级 1',
children: [{
id: 2,
label: '二级 1-1',
children: [{
id: 3,
label: '三级 1-1-1'
}]
}]
}, {
id: 4,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1',
children: [{
id: 6,
label: '三级 2-1-1'
}]
}, {
id: 7,
label: '二级 2-2',
children: [{
id: 8,
label: '三级 2-2-1'
}]
}]
}, {
id: 9,
label: '一级 3',
children: [{
id: 10,
label: '二级 3-1',
children: [{
id: 11,
label: '三级 3-1-1'
}]
}, {
id: 12,
label: '二级 3-2',
children: [{
id: 13,
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
created() { },
methods: {
// 点击 树状里面当前那个
handleNodeClick(data) {
this.demoString = data.label; // 前端显示中文
this.demoNumber = data.id; // 传后台值为对应 id
this.closeTree = !this.closeTree;
},
// 点击 input 打开 树状,
getTree() {
this.closeTree = !this.closeTree;
},
},
}; </script>
<style scoped> </style>


element-ui <el-input> +<el-tree>使用的更多相关文章

  1. element ui,input框输入时enter健进行搜索

    <el-form-item label="企业名称"> <el-input v-model="formSearch.kw" @keyup.en ...

  2. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  3. Element UI tree 回显问题

    Part.1 问题 写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限.涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就 ...

  4. element ui源码解析 -- input篇

    el-input是element ui中使用最频繁的组件之一了,分析其构成从四个方面入手:DOM结构,属性,样式,事件入手 DOM结构: <div> <input /> < ...

  5. Element ui tree结合Vue使用遇到的一些问题(一)

    下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...

  6. 【Element UI】使用问题记录

    [Element UI]使用问题记录 转载:https://www.cnblogs.com/yangchongxing/p/10750994.html 下载地址: https://unpkg.com/ ...

  7. Html | Vue | Element UI——引入使用

    前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

  8. Vue(十八)Element UI

    Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...

  9. 14: element ui 使用

    1.1 element ui 基本使用 参考网址: http://element.eleme.io/#/zh-CN/component/button 1.初始一个vue项目并安装element ui ...

  10. element ui 的Notification通知如何加 a 标签和按钮,并弹多个

    前言:工作中需要在页面右下角弹出很多个提醒框,提醒框上有一个可点击的a标签,并有一个按钮,同时还需要一次性关闭所有的弹出框.转载请注明出处:https://www.cnblogs.com/yuxiao ...

随机推荐

  1. 对stm32寄存器的理解(个人理解,大神轻喷)

    学习了stm32有一年了,今天想来写写自己对寄存器的理解,帮助那些有志学习stm32的朋友们少走一些弯路. ---------------------------------------------- ...

  2. PSPnet模型结构的实现代码

    1 import torch import torch.nn.functional as F from torch import nn from torchvision import models f ...

  3. Nginx技术研究系列7-Azure环境中Nginx高可用性和部署架构设计

    前几篇文章介绍了Nginx的应用.动态路由.配置.在实际生产环境部署时,我们需要同时考虑Nginx的高可用性和部署架构. Nginx自身不支持集群以保证自身的高可用性,商业版本的Nginx+推荐: T ...

  4. 第八篇——Struts2的处理结果类型

    Struts2处理结果类型 1.SUCCESS:表示Action正确的执行完成,返回相应的视图,success是name属性的默认值: 2.ERROR:表示Action执行失败,返回到错误处理视图: ...

  5. Eclipse Decompiler不生效解决办法

    如下图,解决方案,Preferences->General->Editors->File Associations->*.class->Decompiler->De ...

  6. servlet injection analysis

    一. Spring不能通过注解向Servlet中注入实例的原理 想了解此问题的原理,就要了解tomcat启动后 servlet和spring的加载顺讯. 1.  tomcat启动后先加载web.xml ...

  7. kubernetes1.5新特性(二):支持Photon卷插件

    在Kubernetes中卷的作用在于提供给POD持久化存储,这些持久化存储可以挂载到POD中的容器上,进而给容器提供持久化存储. 从图中可以看到结构体PodSpec有个属性是Volumes,通过这个V ...

  8. MariaDB glare cluster简介

    MariaDB MariaDB 是由原来 MySQL 的作者Michael Widenius创办的公司所开发的免费开源的数据库服务器,MariaDB是同一MySQL版本的二进制替代品, 当前最新版本1 ...

  9. oracle ora-12514解决办法

    原来配置好的数据库监听用plsql登陆报错ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 网上说的改listener.ora 添加如下配置 SID_LIST_LISTENER = ...

  10. index read-only

    系统重启后,Eleastisearch6.5.0在给 Eleastisearch 更新索引的时候报了一个错误:ClusterBlockException[blocked by: [FORBIDDEN/ ...