精华内容
下载资源
问答
  • VUE联动下拉选择框

    2020-07-25 19:48:46
    </p> 选中的项目名称entryValue: {{entryValue}}</h3> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script> <script> var vueMain = new Vue({ el: '.main', data: { mapData: [ ...

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .main {
                width: 500px;
                margin: 50px auto;
                padding: 15px;
                background-color: antiquewhite;
            }
            .item>p {
                display: inline-block;
                margin-right: 10px;
                width: 100px;
                text-align: right;
            }
            .item>select {
                min-width: 100px;
            }
        </style>
    </head>
    <body>
        <div class="main">
    
            <div class="item">
                <p>项目名称</p>
                <select v-model="entryValue" @change="entryChange">
                    <option v-for="item in mapData" :key="item.entryId" :value="item.entryId" :lable="item.entry">
                        {{item.entry}}
                    </option>
                </select>
            </div>
            
            <div class="item">
                <p>标段名称</p>
                <select v-model="sectionValue" @change="sectionChange">
                    <option v-for="item in sectionOptions" :value="item.sectionId" :lable="item.section">
                        {{item.section}}
                    </option>
                </select>
            </div>
    
            <div class="item">
                <p>参与安全员</p>
                <select v-model="personValue">
                    <option v-for="item in personOptions" :value="item.personId" :lable="item.person">
                        {{item.person}}
                    </option>
                </select>
            </div>
            
            <p>选中的项目名称ID为:{{entryValue}},标段名称ID为:{{sectionValue}},参与安全员ID为:{{personValue}}</p>
            <h3>选中的项目名称entryValue: {{entryValue}}</h3>
    
        </div>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
        <script>
            var vueMain = new Vue({
                el: '.main',
                data: {
                    mapData: [
                        {
                            entryId: '1',
                            entry: '项目1',
                            sectionArr: [
                                {
                                    sectionId: '1-1',
                                    section: '项目1标段1',
                                    personArr: [
                                        {
                                            personId: '1-1-1',
                                            person: '项目1标段1安全员1'
                                        },
                                        {
                                            personId: '1-1-2',
                                            person: '项目1标段1安全员2'
                                        },
                                        {
                                            personId: '1-1-3',
                                            person: '项目1标段1安全员3'
                                        },
                                    ]
                                },
                                {
                                    sectionId: '1-2',
                                    section: '项目1标段2',
                                    personArr: [
                                        {
                                            personId: '1-2-1',
                                            person: '项目1标段2安全员1'
                                        },
                                        {
                                            personId: '1-2-2',
                                            person: '项目1标段2安全员2'
                                        },
                                        {
                                            personId: '1-2-3',
                                            person: '项目1标段2安全员3'
                                        },
                                    ]
                                }
                            ]
                        },
                        {
                            entryId: '2',
                            entry: '项目2',
                            sectionArr: [
                                {
                                    sectionId: '2-1',
                                    section: '项目2标段1',
                                    personArr: [
                                        {
                                            personId: '2-1-1',
                                            person: '项目2标段1安全员1'
                                        },
                                        {
                                            personId: '2-1-2',
                                            person: '项目2标段1安全员2'
                                        },
                                        {
                                            personId: '2-1-3',
                                            person: '项目2标段1安全员3'
                                        },
                                    ]
                                },
                                {
                                    sectionId: '2-2',
                                    section: '项目2标段2',
                                    personArr: [
                                        {
                                            personId: '2-2-1',
                                            person: '项目2标段2安全员1'
                                        },
                                        {
                                            personId: '2-2-2',
                                            person: '项目2标段2安全员2'
                                        },
                                        {
                                            personId: '2-2-3',
                                            person: '项目2标段2安全员3'
                                        },
                                    ]
                                }
                            ]
                        }
                    ],
                    // 标段下拉项数组
                    sectionOptions: [],
                    // 安全员下拉项数组
                    personOptions: [],
                    // 项目选中值
                    entryValue: '',
                    // 标段选中值
                    sectionValue: '',
                    // 安全员选中值
                    personValue: ''
                },
                methods: {
                    entryChange() {
                        const item = this.mapData.find(item => item.entryId == this.entryValue)
                        this.sectionOptions = item.sectionArr
                        this.sectionValue = ''
                        this.personValue = ''
                    },
                    sectionChange() {
                        const item = this.sectionOptions.find(item => item.sectionId == this.sectionValue)
                        this.personOptions = item.personArr
                        this.personValue = ''
                    }
                }
            })
        </script>
    </body>
    </html>
    
    展开全文
  • 主要介绍了Vue实现左右菜单联动实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue联动查询

    2019-01-23 17:59:00
    ${webRoot}/plug-in/vue/vue-resource.js"> ${webRoot}/plug-in/element-ui/index.js"> ,easyui,tools,DatePicker"> //编写自定义JS代码 ${schemeid}" > ${tOperationPage.id }"/> ;" cellpadding="0...
    <%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@include file="/context/mytags.jsp"%>
    <!DOCTYPE html>
    <html>
    <head>
    <title>业务配置表</title>
    <link rel="stylesheet" href="${webRoot}/plug-in/element-ui/css/index.css">
    <link rel="stylesheet" href="${webRoot}/plug-in/element-ui/css/elementui-ext.css">
    <script src="${webRoot}/plug-in/vue/vue.js"></script>
    <script src="${webRoot}/plug-in/vue/vue-resource.js"></script>
    <script src="${webRoot}/plug-in/element-ui/index.js"></script>
    <t:base type="jquery,easyui,tools,DatePicker"></t:base>
    <script type="text/javascript">
    //编写自定义JS代码
    </script>
    </head>
    <body>
    <t:formvalid formid="formobj" dialog="true" usePlugin="password" layout="table" action="tOperationController.do?doAdd&schemeid=${schemeid}" >
    <input id="id" name="id" type="hidden" value="${tOperationPage.id }"/>
    <table style="width: 600px;" cellpadding="0" cellspacing="1" class="formtable" id="scheme">
    <tr hidden="hidden">
    <td align="right">
    <label class="Validform_label">
    方案id:
    </label>
    </td>
    <td class="value">
    <input id="sId" name="sId" type="text" maxlength="32" style="width: 150px" class="inputxt" ignore="ignore" />
    <span class="Validform_checktip"></span>
    <label class="Validform_label" style="display: none;">方案id</label>
    </td>
    </tr>
    <tr>
    <td align="right">
    <label class="Validform_label">
    一级分类:
    </label>
    <input name="levelOne" hidden="hidden" v-model="levelOne">
    </td>
    <td class="value">
    <div id="example">
    <select v-model="levelOne">
    <option v-for="option in arr" :value="option.code">
    {{ option.name }}
    </option>
    </select>
    </div>
    </td>
    </tr>
    <tr>
    <td align="right">
    <label class="Validform_label">
    二级分类:
    </label>
    <input name="levelTwo" hidden="hidden" v-model="levelTwo">
    </td>
    <td class="value">
    <select v-model="levelTwo">
    <option v-for="option in arrTwo" :value="option.code">
    {{ option.name }}
    </option>
    </select>
    </td>
    </tr>
    <tr>
    <td align="right">
    <label class="Validform_label">
    三级分类:
    </label>
    <input name="levelThree" hidden="hidden" v-model="levelThree">
    </td>
    <td class="value">
    <select v-model="levelThree">
    <option v-for="option in arrThree" :value="option.code">
    {{ option.name }}
    </option>
    </select>
    </td>
    </tr>
    <tr>
    <td align="right">
    <label class="Validform_label">
    数量:
    </label>
    </td>
    <td class="value">
    <input id="num" name="num" type="text" maxlength="32" style="width: 150px" class="inputxt" ignore="ignore" />
    <span class="Validform_checktip"></span>
    <label class="Validform_label" style="display: none;">数量</label>
    </td>
    </tr>
    </table>
    </t:formvalid>
    <script type="text/javascript">
    var vm = new Vue({
    el: '#scheme',
    data: {
    arr: [],
    arrTwo:[],
    arrThree:[],
    levelOne:"",
    levelTwo:"",
    levelThree:""
    },
    methods: {
    init: function () {
    //初始化
    var a = "";
    var that = this;
    $.get(
    "tOperationController.do?loadAllLevel&level="+a,
    function (result) {
    var resultjson = eval("(" +
    result + ")");
    that.arr = resultjson.obj;
    });
    },
    updateLevelTwo: function () {
    //初始化
    var that = this;
    if(this.levelOne != ""){
    $.get(
    "tOperationController.do?loadAllLevel&level="+that.levelOne,
    function (result) {
    var resultjson = eval("(" +
    result + ")");
    that.arrTwo = resultjson.obj;
    });
    }
    },
    updateLevelThree: function () {
    //初始化
    var that = this;
    if(this.levelTwo != ""){
    $.get(
    "tOperationController.do?loadAllLevel&level="+that.levelTwo,
    function (result) {
    var resultjson = eval("(" +
    result + ")");
    that.arrThree = resultjson.obj;
    });
    }else{
    that.arrThree = [];
    }
    }
    },
    watch: {
    levelOne: function () {
    this.updateLevelTwo();
    this.updateLevelThree();
    },
    levelTwo: function () {
    this.updateLevelThree();
    }
    }
    });
    vm.init();
    </script>
    </body>

    转载于:https://www.cnblogs.com/ng-xixi/p/10310516.html

    展开全文
  • 主要介绍了vue左右侧联动滚动的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 联动搜索

    2017-08-30 17:45:00
    //下面是联动搜索的方法 返回筛选后的computedList列表 computedList: function () { var vm = this //利用筛选将符合输入的list返回,再通过迭代渲染出来 return this.list.filter(function (item) { ...

    <input v-model="query">//将输入值绑定

    //迭代computedList

    <li  v-for="(item, index) in computedList" v-bind:key="item.msg" v-bind:data-index="index">{{ item.msg }} </li>
    //数据
    list: [
    { msg: 'Bruce Lee' },
    { msg: 'Jackie Chan' },
    { msg: 'Chuck Norris' },
    { msg: 'Jet Li' },
    { msg: 'Kung Fury' }
    ]

    //下面是联动搜索的方法

    返回筛选后的computedList列表

    computedList: function () {
    var vm = this

    //利用筛选将符合输入的list返回,再通过迭代渲染出来
    return this.list.filter(function (item) {
    return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
    })
    }

    转载于:https://www.cnblogs.com/yuanchenchun/p/7454526.html

    展开全文
  • vue 联动 感想

    2016-11-08 16:33:55
    1.[Vue warn]: Duplicate value found in v-for="two in citylist": "海淀". Use track-by="$index" if you are expecting duplicate values. (found in component: ) 数据有重复 允许重复 后

    写这个的时候因为有之前的例子 没有遇到特别大的问题 

    1.[Vue warn]: Duplicate value found in v-for="two in citylist": "海淀". Use track-by="$index" if you are expecting duplicate values. (found in component: <linkage>)

    数据有重复  允许重复 <option v-for="two in citylist" track-by="$index" >  后边加了track-by="$index"  这个

    2. 这个是比较严重的是选择计算 还是change事件联动

       我从网上查到的是计算。但是我自己没写出来(不知道原因) 这个是change 写的

    3.this.selectOne  在find 里边 找不到所以我就在外边先定义了一下  selectOne=this.selectOne  然后再进行的操作

    4 select的 默认值 不知道怎么弄  然后我写的加了一个请选择(跟我预期的不一样 。。待完善)

    展开全文
  • Vue联动下拉框默认选中

    千次阅读 2019-01-17 21:50:06
    这时,不能再用编程思想的if else来看待vue的if else了。 看下方代码,我写了两个默认值,一个山东一个河南,这样写的话两个条件都成立,因此出来山东和河南这两个省: 我又把v-else加上: 这样,所有的...
  • 一个基于Vue2的联动选择组件
  • 下面小编就为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 下面我就为大家分享一篇vue2.0.js的多级联动选择器实现方法,具有很好的参考价值,希望对大家有所帮助。由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于vue2.0的...
  • vue 联动

    2016-11-08 16:31:54
    无标题文档 -->  .on{  background: #ccc  }   window.onload=function(){ ... Vue.component("linkage",{  template:'#linkage',  props:{  Data:Array,  },  
  • 一款简单的基于vue实现的三级联动下拉框代码,适用于各种三级联动下拉菜单选择功能。
  • 想用vue.js写一个联动效果,按照自己的思路实验了下,并没有成功。请大家指点下我的思路是:通过遍历YX数组,如果某个对象的text和第一个select的selected value相同,则显示对应院系的专业 <select v-model=...
  • vue实现联动选择

    千次阅读 2019-07-09 15:51:39
    因为项目需求,作者和作者头像都是由后台接口传给前端的,所以我就选择用select来实现 主要想法就是当选择作者后,自动显示头像,(效果如下:) 下面就分享下代码(element): 页面用的就是form表单 ...
  • vue下拉框二级联动

    2021-03-22 00:36:49
    <... <head> <meta charset="utf-8">...script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> .
  • vue实现三级联动,多级联动

    万次阅读 2019-04-25 10:34:54
    vue多级联动,三级联动
  • 在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用,需要的朋友可以参考下
  • vue select 下拉框 联动

    2020-10-14 23:44:24
    (1)三个下拉框,第二个和第三个都需要第一个下拉框的数据id才能通过接口请求到数据 (2)遇到的问题,二、三下拉框的数据更新不同步 (3)鼠标点击二次才能将... <template> <ul class="h45">.../p&g...
  • vue实现下拉菜单二级联动效果1、实现效果2、后端返回的数据格式3、vue页面中 1、实现效果 2、后端返回的数据格式 "list": [ { "id": "1178214681118568449", "title": "后端开发", "children": [ { "id": ...
  • 主要介绍了vue watch深度监听对象实现数据联动的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue结合swiper实现演示--鼠标控制,鼠标控制向下滚动,每次向下滚动一页,非传统滚动条式向下滚动(卡片式滚动)
  • VUE 实现select联动效果

    万次阅读 2018-02-24 16:36:22
    Vue获取下拉菜单的值,用v-model,只有点击下拉框的值才会赋值到下拉框中,并且初始化时下拉框里没有数据,而改用$event就不会出现这样的问题。coding: v-model解决方式: &lt;div style="width:100%;&...
  • 主要为大家详细介绍了Vue.js组件tree实现省市多级联动的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue的数据赋值联动改变解决方案 浅拷贝和深拷贝 https://www.cnblogs.com/ruruo/p/13213362.html
  • 主要为大家详细介绍了vue移动端城市三级联动组件的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Ant Vue表单控件的联动校验需求逻辑实现多说一句 需求 最近想在表单里面实现一个可以联动校验的日期选择框,但是查找了好多博客,没有发现符合的描述,大概是我的需求太简单了,大佬都不屑于记录,本文用于我自己的...
  • 下面小编就为大家分享一篇vue2.0.js的多级联动选择器实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,603
精华内容 2,641
关键字:

vue联动

vue 订阅