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. Linux批量新建文件夹（大括号表达式的应用）

    如果想要批量新建文件夹来存放照片,按照年份和月份,格式为YYYY-MM.可以使用下面命令批量新建: mkdir {2007..2009}-{01..12} 结果如下: 2007-01 2007-07 ...

  2. Java序列化及反序列化

    序列化概念: 1.Java序列化与反序列化  Java序列化是指把Java对象转换为字节序列的过程:而Java反序列化是指把字节序列恢复为Java对象的过程. 2.为什么需要序列化与反序列化 我们知道 ...

  3. ECS运维：操作系统有异常？诊断日志来帮忙！

    ​云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新.阿里云使用严格的IDC标准.服务器准入标准 ...

  4. Oracle 的trim，ltrim,rtrim函数的区别

    该函数共有两种作用:第一种,即大家都比较熟悉的去除空格.例子:--TRIM去除指定字符的前后空格SQL> SELECT TRIM(' dd df ') FROM dual;TRIM('DDDF' ...

  5. [CSP-S模拟测试]:字符消除2（hash+KMP）

    题目背景 生牛哥终于打通了“字符消除”,可是他又被它的续集难倒了. 题目传送门(内部题52) 输入格式 第一行$n$表示数据组书.接下来每行一个字符串.(只包含大写字母) 输出格式 每组数据输出一个$ ...

  6. Linux二进制程序安装使用

    下载好的二进制,压缩包解压,或者直接是二进制. 放到想要的目录 在 /etc/environment 双引号前面添加程序路径 以:开头,\结尾可以换行 接下来修改sudo ,不然sudo会找不到 以下 ...

  7. Aspect-Oriented Programming : Aspect-Oriented Programming with the RealProxy Class

    Aspect-Oriented Programming : Aspect-Oriented Programming with the RealProxy Class A well-architecte ...

  8. jquery 自定义类

    jQuery自定义类封装: (function ($) { $.DragField = function (arg) { var name = "你好"; //这个是私有变量,外部 ...

  9. Oralce-PL/SQL编程-游标

    PL/SQL(Procedural Language/SQL)是Oracle在数据库中引入的一种过程化编程语言. PL/SQL块结构 声明部分 执行部分(必须的) 异常处理部分 [declare] - ...

  10. day 101 天

    一.新建项目 +安装bootstrap 安装bootstrap组件 二.Vue-route的使用 1. router.js配置文件 2. vue文件 3. Header.js文件