elementUI vue tree input 懒加载输入下拉树型示例点击其他区域关闭自定义div

756 0 0

作者:```...简单点

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-tree{
            position:absolute;
            cursor:default;
            background:#fff;
            color:#606266;
            z-index:100;
            border:1px solid #dcdfe6;
            border-radius:5px;
            width:100%;
        }
　　　　/*elementUI vue tree 显示设置高度与滚动条*/
　　　　.ORGTree{
　　　　　　height:300px;
　　　　　　overflow:auto;
　　　　}
    </style>
</head>
<body>

<div id="app">
    <el-form ref="projectOrg" v-model="projectOrg" label-width="140px" size="mini">
        <el-form-item ref="treeParent" label="维护机构" prop="projectOrg">
            <el-input @click.native="projectOrgFun($event)" v-model="searchOrgId" placeholder="请输入维护机构" readonly></el-input>
            <el-tree  class="ORGTree"
                    v-show="ishowTree"
                    show-checkbox
                    lazy
                    ref="tree"
                    highlight-current
                    @check-change="currentchange"
                    :load="getOrgList"
                    @node-click="handleNodeClick"
                    :props="defaultProps">
            </el-tree>
        </el-form-item>
    </el-form>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                input: [],
                searchOrgId: '',

　　　　　　　　　　//保存被选中的ID, 提交的时候按字符串提交:
                // var organCodesList=this.organCodes.join(","),
                // 后台解析的时候使用:
                //String[] organCodes=organCodesList.split(",");
                organCodes: [],
                ishowTree: false,
                defaultProps: {
                    children: 'children',
                    label: 'label',
                },
                projectOrg: '',


            }
        },

        //加载完成时调用
        created: function () {

        },
        //方法
        methods: {

            //树型点击
            currentchange(data, ischeck) {
                console.log(data);
                if (!ischeck) {
                    var index = this.input.findIndex(d => d === data.label);
                    this.input.splice(index, 1);
                    this.organCodes.splice(index, 1);
                } else {
                    this.input.push(data.label);
                    this.organCodes.push(data.id);
                }
                console.log(this.organCodes);
                var that = this;
                that.$refs.tree.$el.onmouseleave = function () {
                    that.ishowTree = false;
                }
                that.searchOrgId = this.input.toString();
            },
            projectOrgFun(e) {
                if(this.ishowTree){
                    this.ishowTree = false;
                }else{
                    this.ishowTree = true;
                }

　　　　　　　　　　//第一种方式:点击其他区域, 消失树
　　　　　　　　　　document.onclick=function(){
　　　　　　　　　　　　that.ishowTree=false;
　　　　　　　　　　}
　　　　　　　　　　e.stopPropagation();//阻止冒泡

　　　　　　　　　　//离开区域的时候树消失
                var that = this;
                that.$refs.tree.$el.onmouseleave = function () {
                    that.ishowTree = false;
                }

                that.$refs.treeParent.$el.onmouseleave = function () {
                    that.ishowTree = false;
                }
            },
            projectOrgFalse(){
                this.ishowTree = false;
            },
            handleNodeClick(data) {
                console.log(data);
            },

            getOrgList(node, resolve) {
                let that = this;
                console.log(node);

                //等于0表示根节点
                if (node.level == 0) {
                    //请求数据
                    // that.getFirstRootNodeData(resolve);

                    //模拟数据
                    var FirstRootNodeData = [{
                        id: '1',
                        label: "初始根节点01"
                    }, {
                        id: '2',
                        label: "初始根节点02"
                    }];
                    resolve(FirstRootNodeData);
                    //直接返回
                    return;
                } else {
                    //请求数据(传送要请求的根节点的id)
                    console.log(node.data.id);
                    // that.getLeafNodeData(node.data.id,resolve);

                    //模拟数据
                    var LeafNodeData = [{
                        id: '1',
                        label: "叶子节点01"
                    }, {
                        id: '2',
                        label: "叶子节点02"
                    }, {
                        id: '2',
                        label: "叶子节点02"
                    }];
                    resolve(LeafNodeData);
                    return;
                }
            }
        },
    })
</script>
</body>
</html>

显示效果:

内容来源于网络如有侵权请私信删除

标签： javascript 技术文章开发

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

elementUI vue tree input 懒加载输入下拉树型示例点击其他区域关闭自定义div

elementUI vue tree input 懒加载输入下拉树型示例点击其他区域关闭自定义div

相关课程

热门标签

elementUI vue tree input 懒加载 输入下拉树型示例 点击其他区域关闭自定义div

elementUI vue tree input 懒加载 输入下拉树型示例 点击其他区域关闭自定义div

相关课程

热门标签

推荐文章

elementUI vue tree input 懒加载输入下拉树型示例点击其他区域关闭自定义div

elementUI vue tree input 懒加载输入下拉树型示例点击其他区域关闭自定义div