iview下拉树组件

iview、vue、jq等自行引用
iview.js和iview.css版本是[email protected]
<!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>