iview、vue、jq等自行引用

iview.js和iview.css版本是iview@3.4.2

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body> <Form-Item label="所属部门" class="addDepartUser-depart">
<i-input v-model="addDepartUserForm.departmentName" placeholder="请选择" readonly>
</i-input>
<Dropdown trigger="custom" :visible="departVisible" placement="bottom-end">
<a href="javascript:void(0)" @click="departVisible=!departVisible">
<Icon type="ios-arrow-down" v-bind:class="{departVisibleSelectIcon:departVisible}"></Icon>
</a>
<DropdownMenu slot="list">
<Tree v-bind:data="departmentTreeData2" @on-select-change="selectDownitem">
</Tree>
</DropdownMenu>
</Dropdown>
</Form-Item> </body> <script>
addDepartUserForm.departmentName
departVisible
departmentTreeData2 // 所属部门
selectDownitem(value) {
if (Array.isArray(value) && value.length > 0) {
this.addDepartUserForm.departmentName = value[0].title;
this.departVisible = false;
}
}
</script> <style>
.addDepartUser-depart .ivu-form-item-content{
position: relative;
} .addDepartUser-depart .ivu-dropdown{
position: absolute;
right: 10px;
top: 0px;
} .addDepartUser-depart .ivu-select-dropdown{
top: 30px !important;
left: -190px !important;
padding: 5px;
} .addDepartUser-depart .ivu-dropdown-rel .ivu-icon{
font-size: 14px;
color: #808695;
transition: all .2s ease-in-out;
} .departVisibleSelectIcon{
transform: rotateZ(-180deg);
} .addDepartUser-depart .ivu-dropdown .ivu-tree{
width: 212px;
} .addDepartUser-depart .ivu-tree ul li{
margin: 2px 0;
}
</style> </html>

iview下拉树组件的更多相关文章

  1. elementUI下拉树组件封装

    使用组件:Popover 弹出框.Tree 树形控件 和 input 输入框 用法: 1.新建一个.vue文件,粘贴以下组件封装的代码(完全可以使用) 2.在页面需要使用下拉树的地方调用即可. (1) ...

  2. 第二百二十七节,jQuery EasyUI,ComboTree(树型下拉框)组件

    jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...

  3. layui扩展组件,下拉树多选

      项目介绍 项目中需要用到下拉树多选功能,找到两个相关组件moretop-layui-select-ext和wujiawei0926-treeselect,但是moretop-layui-selec ...

  4. 开源框架.netCore DncZeus学习(五)下拉树的实现

    千里之行,始于足下,先从一个小功能研究起,在菜单管理页面有一个下拉树,先研究下它怎么实现的 1.先找到menu.vue页面 惯性思维先搜索请选择三个字,原来是动态生成的 再向上找DropDown组件, ...

  5. zTree开发下拉树

    最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...

  6. vue-Treeselect实现组织机构(员工)下拉树的功能

    知识点:前端使用vuetree的组件库,调用后台查询组织机构,包括人员的接口 实现下拉树的功能 查考: vue-treeselect官网:https://vue-treeselect.js.org/ ...

  7. Extjs下拉树代码测试总结

    http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Ex ...

  8. EasyUI-combotree 下拉树 数据回显时默认选中

    组合树(combotree)把选择控件和下拉树结合起来.它与组合框(combobox)相似,不同的是把列表替换成树组件.组合树(combotree)支持带有用于多选的树状态复选框的树. 依赖 comb ...

  9. 自绘制HT For Web ComboBox下拉框组件

    传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HTforWeb通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个 ...

随机推荐

  1. PHP curl_init函数

    curl_init — 初始化一个cURL会话 说明 resource curl_init ([ string $url = NULL ] ) 初始化一个新的会话,返回一个cURL句柄,供curl_s ...

  2. delphi 程序嵌入桌面效果的实现

    function Tform1.CreateRegion(wMask:TBitmap;wColor:TColor;hControl:THandle): HRGN; var dc, dc_c: HDC; ...

  3. Acunetix Web Vulnerability Scanner(WVS)(Acunetix网络漏洞扫描器)

    Acunetix网络漏洞扫描软件检测您网络的安全性安全测试工具Acunetix Web Vulnerability Scanner(WVS) (Acunetix网络漏洞扫描器)技术 网络应用安全扫描技 ...

  4. spring cloud gateway 拦截request Body

    在接入Spring-Cloud-Gateway时,可能有需求进行缓存Json-Body数据或者Form-Urlencoded数据的情况. 由于Spring-Cloud-Gateway是以WebFlux ...

  5. 【Angular】No component factory found for ×××.

    报错现象: 用modal打开某个组件页面时报错 报错:No component factory found for UpdateAuthWindowComponent. Did you add it ...

  6. Java学习之多态---类成员变化

    类成员 一.成员变量 编译时:变量(f)所属类(Fu)中是否有成员变量,有:编译成功,没有:编译失败 运行时:变量(f)所属类(Fu)中是否有成员变量,运行该类(Fu)中的成员变量 class Fu ...

  7. Spring中ApplicationContext加载机制和配置初始化

    Spring中ApplicationContext加载机制.        加载器目前有两种选择:ContextLoaderListener和ContextLoaderServlet.        ...

  8. python 将图片存入mongodb,读取图片,gridfs模块

    导入图片引入模块,其中gridfs模块不需要单独安装,引入了pymongo即可直接引入from pymongo import MongoClientfrom gridfs import *import ...

  9. mongo 慢查询配置

    我是分片部署,所以慢查询相关的配置是在启动片服务上. 执行查询命令,是在share的primary 上. 1. mongodb慢查询   配置 慢查询数据主要存储在 local库的system.pro ...

  10. CET-6 分频周计划生词筛选(Week 1)

    Week 1 2016.09.03 p17 bias = prejudice / prejudge p18 diminish p19 distinguish/extinguish + majority ...