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>