当前位置：移动技术网 > IT编程>开发语言>JavaScript > elementUI vue tree input 懒加载输入下拉树型示例

elementUI vue tree input 懒加载输入下拉树型示例

2018年10月30日 | 移动技术网IT编程 | 我要评论

<!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>

显示效果:

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

JS初学必须要理解的基础知识

1、第一个javascript程序程序书写的位置JavaScript也是一个纯文本的语言。在页面中，<sc... [阅读全文]
JSON的简要解析

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。... [阅读全文]
使用D3.js进行Neo4j数据的前端展示

背景:目前存在这样的需求，需要Neo4j图数据库存储表级血缘关系，血缘关系图要在前端页面进行展示；Neo4j自带... [阅读全文]
Ajax中get和post方法

ajax()方法$.ajax({url:请求地址type:"get | post | put | delete ... [阅读全文]
荐 vue基础及高级用法（一）

1. 插值表达式{{xxx}}的形式，可以是值，也可以是表达式（不能是 js 语句，比如if、for）<d... [阅读全文]
荐 AJAX初识Day1——POST & GET请求

AJAX1. 简介AJAX（Asynchronous JavaScript and XML ），最早出现在 05... [阅读全文]
海创软件组-20200712-学习过程中的记录

前端基础补足HTML5/CSS 部分1.搜索引擎的搜索问题2.图片的格式问题3. 盒子模型中的margin垂直方... [阅读全文]
JavaScript JS数组的操作

JavaScript JS数组的操作数组的操作数据的循环本质上是。通过生成索引的下标来获取数组中的每一个单元... [阅读全文]
海创软件组--20200712--axios上传文件获取进度--js对多个四边形的点对象数组分别按顺时针排序--定义上传视频并可预览

文章目录1：axios上传文件获取进度2：js对多个四边形的点对象数组分别按顺时针排序1：axios上传文件获取... [阅读全文]
用原生js-对ajax封装

function ajax(methods, url, callback, params) { //1.创... [阅读全文]

网友评论


验证码：

elementUI vue tree input 懒加载 输入下拉树型示例

2018年10月30日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论

elementUI vue tree input 懒加载输入下拉树型示例