vue+element下拉树选择器
项目需求：输入框点击弹出树形下拉结构，可多选或者单选。
解决方案：1.使用layui formSelect多选插件
2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构
<el-form-item label="下拉树选择器">
<el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags>
<el-option :value="mineStatus" style="height: auto">
<el-tree :data="treedata" default-expand-all show-checkbox check-strictly node-key="id"
ref="tree" highlight-current :props="defaultProps"
@check-change="handleCheckChange"></el-tree>
</el-option>
</el-select>
</el-form-item>
data: function () {
return {
mineStatus: "",
treedata: [],
defaultProps: {
children: "children",
label: "name"
},
}
},
handleCheckChange(data, checked, node) {
let res = this.$refs.tree.getCheckedNodes(false, true); //true，1. 是否只是叶子节点 2.选择的时候不包含父节点）
if (checked) {
this.$refs.tree.setCheckedNodes([data]);
}
let arrLabel = [];
// console.log(res, 'res')
res.forEach(item => {
if (arrLabel.length === 0) {
arrLabel.push(item.name);
} else {
arrLabel.length === 0;
}
});
this.mineStatus = arrLabel;
// console.log(arrLabel, 'arrLabel')
},
vue+element下拉树选择器的更多相关文章
- vue 模拟下拉树
// 使用vue 做表格部分其他部分暂不修改 var app = new Vue({ el: "#freightTbl", watch: { //监听表格数据的变化[使用 watc ...
- vue+element下拉框样式的点击按钮
项目中点击按钮实在太多了,怎么办呢?我们就可以将它们制作成像下拉框那样的类似操作 1.HTML样式部分:关键点在于command 方法和属性 1 <el-dropdown 2 size=&quo ...
- 开源框架.netCore DncZeus学习（五）下拉树的实现
千里之行,始于足下,先从一个小功能研究起,在菜单管理页面有一个下拉树,先研究下它怎么实现的 1.先找到menu.vue页面 惯性思维先搜索请选择三个字,原来是动态生成的 再向上找DropDown组件, ...
- vue-Treeselect实现组织机构（员工）下拉树的功能
知识点:前端使用vuetree的组件库,调用后台查询组织机构,包括人员的接口 实现下拉树的功能 查考: vue-treeselect官网:https://vue-treeselect.js.org/ ...
- layui扩展组件，下拉树多选
项目介绍 项目中需要用到下拉树多选功能,找到两个相关组件moretop-layui-select-ext和wujiawei0926-treeselect,但是moretop-layui-selec ...
- elementUI下拉树组件封装
使用组件:Popover 弹出框.Tree 树形控件 和 input 输入框 用法: 1.新建一个.vue文件,粘贴以下组件封装的代码(完全可以使用) 2.在页面需要使用下拉树的地方调用即可. (1) ...
- zTree开发下拉树
最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...
- vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...
- vue select下拉框绑定默认值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...
随机推荐
- Android插件化（六）: OpenAtlasの改写aapt以防止资源ID冲突
Android插件化(六): OpenAtlasの改写aapt以防止资源ID冲突 转 https://www.300168.com/yidong/show-2791.html 核心提示:引言And ...
- 安装TensorFlow时出现ERROR: Cannot uninstall 'wrapt'问题的解决方案
pip install -U --ignore-installed wrapt enum34 simplejson netaddr pip install -i https://pypi.tuna.t ...
- osg RTT 多相机-局部放大镜
#ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...
- hive-1.1.0-cdh5.11.1-src compile
1. download cdh hive src http://archive.cloudera.com/cdh5/cdh/5/hive-1.1.0-cdh5.11.1-src.tar.gz 2. ...
- 多林环境中的ADFS
公司有两个或更多Active Directory林,但是只有一个ADFS,如何让ADFS支持多个域林呢?(一个ADFS只能部署在一个域中,不能跨域) 答案是:在部署ADFS的林和所有其他林之间建立双向 ...
- 性能测试loadrunner11工具再也不用担心浏览器兼容的问题了（目前试过的各版本浏览器都是成功的）
工具:Loadrunner 11.0+Fiddler+浏览器(谷歌.火狐.IE等) 步骤一:查看抓包工具Fiddler对应的端口 1.打开Fiddler------工具------选项-----连接, ...
- 慕课零基础学java语言翁恺老师——第一周编程题
温度转换(5分) 题目内容: 写一个将华氏温度转换成摄氏温度的程序,转换的公式是: °F = (9/5)*°C + 32 其中C表示摄氏温度,F表示华氏温度. 程序的输入是一个整数,表示华氏温度.输出 ...
- Nginx 413 Request Entity Too Large
用户上传图片的时候,报错. 发现,原来是图片太大导致. 咦?后台配置图片支持5M啊? 哦!原来是Nginx配置问题. Nginx默认支持1M的POST数据! 修改Nginx配置! 修改nginx.co ...
- Tomcat部署WEB应用方式
罗列在Tomcat部署web应用的几种方法,供以后翻阅,本博文以helloapp应用为例 Tomcat目录介绍 简单目录介绍如下 bin目录:包含tomcat启动/关闭等脚本,支持linux.wind ...
- 国产龙芯服务器源码安装PostgreSQL数据库的方法
1. 公司最近有一些国产化项目的需求, 要求在国产CPU的服务器上面安装pg数据库等. 2.. 但是差查了下中标麒麟的官网,在龙芯MIPS的操作系统包源里面仅有 postgreSQL 9.2 版本的r ...