iview下拉树组件

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>