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. grep正则表达式（一）

    新建一批 txt 文件: [me@linuxbox ~]$ ls /bin > dirlist-bin.txt [me@linuxbox ~]$ ls /usr/bin > dirlist ...

  2. ROS基础学习总结

    最近一周因为工程需要,把ROS的一些基础学习了一下,现在做一下总结. 学习资源: #创客智造整理的wiki上的ROS入门教程(中文)https://www.ncnynl.com/category/ro ...

  3. boost Shared Memory

    Shared Memory Shared memory is typically the fastest form of interprocess communicatioin. It provide ...

  4. 项目中有 xxxx 不能被json序列化

    遇到这类问题 ,首先断点调试,看看要序列化的值 是一个什么类型的值 查看值得数据类型 在将值转化成可以被json序列化的对象 此时即可解决问题 如遇到  requests.post() 朝一个url发 ...

  5. html插入链接的实现方法

    下面就为大家带来一篇html插入链接的实现方法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   每个网页都已一个地址,用URL()标识,通常在网站内部创建链接时,通常 ...

  6. 从头开始开发一个vue幻灯片组件

    首先新建项目vue init webpack projectName 安装依赖包npm i这些就不说了 接下来就是构建我们的swiper组件 因为我写的代码不规范, 通不过eslint的检测, 会频繁 ...

  7. 【Java架构：持续交付】一篇文章搞掂：持续交付理论

    一.持续集成.持续交付.DevOps概念,关系等 持续集成(Continuous integration/CI) 持续交付(Continuous delivery/CD) 持续部署() 持续 (Con ...

  8. python练习题返回列表中的第二小的元素的下标

    # 第三题:返回列表中的第二小的元素的下标 # 1.参数是一个列表,元素全部是整数 # 2.返回第二小的元素的下标 def seconde_min(lt): n = len(lt) if lt[0]& ...

  9. SetWindowsHookEx 其他进程的 记录

    SetWindowsHookEx(  WH_GETMESSAGE,CallWndProc, HInstance, h2); WH_GETMESSAGE  这个类型 hook  其他窗体的 线程是正常的 ...

  10. upc组队赛14 Bus stop【签到水】

    Bus Stop 题目描述 In a rural village in Thailand, there is a long, straight, road with houses scattered ...