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属性 二.当 ...
随机推荐
- SQL-W3School-函数:SQL LEN() 函数
ylbtech-SQL-W3School-函数:SQL LEN() 函数 1.返回顶部 1. LEN() 函数 LEN 函数返回文本字段中值的长度. SQL LEN() 语法 SELECT LEN(c ...
- [webpack]webpack打包优化
1.import优化 a.tree-shaking 把没用到的代码删除掉,import 在生产环境下 会自动去除掉没用的代码 b.scope hosting 作用域提升,在webpack中会自动省略一 ...
- jar启动脚本shell
#!/bin/bash#这里可替换为你自己的执行程序,其他代码无需更改 APP_NAME=/opt/server/msp/health-api/health-2.0.2.jar#使用说明,用来提示输入 ...
- window server 2008 iis7+php安装配置
安装环境支持 Microsoft Visual C++ 2012 net framework 4.5 php配置 precision = 20 serialize_precision = 100 ...
- osg 3ds模型加载与操作
QString item1 = QString::fromStdString(groupParam->getChild(k)->getName()); QStandardItem* ite ...
- NULL和nullptr
NULL就是0 nullptr是空指针[c++11]
- Spring Aop(十五)——Aop原理之Advised接口
转发地址:https://www.iteye.com/blog/elim-2398726 Spring Aop原理之Advised接口 通过之前我们介绍的ProxyFactory我们知道,Spring ...
- iOS-代理设计模式delegate和protocol
充当代理的步骤: 首先要明确谁请别人代理,谁当别人的代理 1> 请代理三部曲: 1 写一个协议protoc,把自己不方便做的事列出来(@protocol studentDelegate < ...
- 这一次,真正掌握composer
思维导图 composer是现代PHP的基石 现代高级编程语言,依赖管理工具是必不可少的.Java有Maven,Python有pip,Nodejs有npm, 而在composer出现之前,PHP只 ...
- Npcap.例子(raw tcp syn)
1.来自:winpcap实现syn攻击 - 125096 - CSDN博客.html(https://blog.csdn.net/qq125096885/article/details/5178452 ...