elementUI vue tree input 懒加载输入下拉树…

2018-10-29 15:27:34来源：博客园阅读 ()

<!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%;
        }
    </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" v-model="searchOrgId" placeholder="请输入维护机构" readonly></el-input>
            <el-tree
                    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() {
                if(this.ishowTree){
                    this.ishowTree = false;
                }else{
                    this.ishowTree = true;
                }
                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>