VUE多个下拉框实现双向联动效果

本文实例为大家分享了VUE多个下拉框实现双向联动的具体代码,供大家参考,具体内容如下

一、前言

在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等。无论是原始的jsp页面html页面等,还是现在流行的vue angluar.js等,逻辑都是一样。本文讲解VUE页面中,多个下拉框如何实现双向联动效果。

二、代码示例

2.1 在vue页面的<el-form 表单里填充两个<el-col :span="12">选项,分别为选项A和选项B,如下所示:

<el-col :span="12">
        <el-form-item label="选项A"  prop="A">            
          <el-select style="width: 100%;" @change="changeAList($event)"
            v-model="temp.A"
            filterable
            remote
            clearable
            placeholder="请选择"
            :remote-method="getAMethod"
            :loading="loading">
            <el-option
              v-for="item in ListA"
              :key="item.value"
              :label="item.value"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :md="12" >
        <el-form-item label="选项B"  prop="B">            
          <el-select style="width: 100%;" @change="changeBList($event)"
            v-model="temp.B"
            filterable
            remote
            clearable
            placeholder="请选择"
            :remote-method="getBMethod"
            :loading="loading">
            <el-option
              v-for="item in ListB"
              :key="item.value"
              :label="item.value"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
</el-col>

2.2 在data的return模块定义两个list集合,用于装载选项A和选项B的数据list集

data() {
    return {
 
              ListA: [],
 
              ListB: [],
        }
}

2.3 在methods: 方法区定义下拉框选项加载从后台接口服务获取的方法。getAMethod用来加载A选项的下拉框内容。getBMethod用来加载B选项的下拉框内容。

getAMethod(temp) {
        XXAPI.getAValue(temp)
        .then(response => {
          if(response.data && response.status == 200){
            this.ListA= []
            var result = response.data.data.XX
            let jsonObj = JSON.parse(result);
            for (let k of Object.keys(jsonObj)) {
              this.ListA.push(
                {
                  label: k,
                  value: jsonObj[k].属性A,
                }
              )
            }
          }
        })
      },
      getBMethod(temp) {
        XXAPI.getDicValue2(temp)
        .then(response => {
          if(response.data && response.status == 200){
            this.ListB = []
            var result = response.data.data.XX
            let jsonObj = JSON.parse(result);
            for (let k of Object.keys(jsonObj)) {
              this.ListB .push(
                {
                  label: k,
                  value: jsonObj[k].属性B,
                }
              )
            }
          }
        })
      },

上述步骤仅完成基本的框架搭建,也就是说后台和前端的数据集合装载以及接口服务调用用以获取数据集合等。

2.4 实现联动,大家都知道在vue的页面中,想要实现多个<el-select 下拉框的值动态改变,必须要调用@change 函数。也就是图1中已经标注的:@change="changeAList($event) 和 @change="changeBList($event)

通过这2个方法即可实现两个下拉框的双向联动效果。

同样在methods:方法区定义方法:

changeBList(e){
      this.indexSelectB(e)
    },
   changeAList(e){
      this.indexSelectA(e)
    },
 
     indexSelectB(e){
        if(this.ListA == undefined || this.ListA .length <= 0){
            this.getAMethod(this.temp);
        }
        let i = 0;
        for (i = 0;i<this.ListA .length;i++) {
          if (this.ListA [i].label == e){
            this.temp.A= this.ListA [i].value;
            break
          }
        }
      },
      indexSelectA(e){
        if(this.ListB == undefined || this.ListB.length <= 0){
            this.getBMethod(this.temp);
        }
        let i = 0;
        for (i = 0;i<this.ListB.length;i++) {
          if (this.ListB[i].label == e){
            this.temp.B= this.ListB[i].value;
            break
          }
        }
      }

以上方法即可实现选项A和选项B两个下拉框的双向联动。但是有个小缺陷,必须要输入字符后才能加载出来数据。

这是因为没有在页面创建的时候,就把后台的数据load出来,实现这个效果也很简单,只需要在created模块中调用两个加载后台接口服务的方法即可,如下:

created() {
    ...
    this.getAMethod(this.temp);
    this.getBMethod(this.temp);
    ...
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue省市区三联动下拉选择组件的实现

    我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用 我们今天来实现一个 利用vuejs开发的 省市区三联动的组件  CitySelect.vue组件 首先来看一下最终的效果(没有写太多的样式...) 组件所需要的省市区的JSON数据(已经封装为commonjs模块了):    provinces.js 这个数据中有这样几个字段: code: 当前省市区的编码 sheng: 当前所在的

  • Vue下拉框双向联动效果的示例代码

    一.前言 在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等.无论是原始的jsp页面html页面等,还是现在流行的vue angluar.js等,逻辑都是一样.本文讲解VUE页面中,多个下拉框如何实现双向联动效果. 二.代码示例 2.1 在vue页面的<el-form 表单里填充两个<el-col :span="12">选项,分别为选项A和选项B,如下所示: <el-col :span=&q

  • vue实现下拉框二级联动效果的实例代码

    1.实现效果 2.后端返回的数据格式 "list": [ { "id": "1178214681118568449", "title": "后端开发", "children": [ { "id": "1178214681139539969", "title": "Java" }, { "id&quo

  • VUE多个下拉框实现双向联动效果

    本文实例为大家分享了VUE多个下拉框实现双向联动的具体代码,供大家参考,具体内容如下 一.前言 在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等.无论是原始的jsp页面html页面等,还是现在流行的vue angluar.js等,逻辑都是一样.本文讲解VUE页面中,多个下拉框如何实现双向联动效果. 二.代码示例 2.1 在vue页面的<el-form 表单里填充两个<el-col :span="12"

  • Vue设置select下拉框的默认选项详解(select空白bug解决)

    最近在用vue设置表单数据时发现了一个小问题:用vue动态渲染select下拉框时,select下拉框会出现空白的bug. <template> <div> <select name="art-cate" v-model="select"> <option disabled selected style="display: block;">请选择您的科目</option> <opt

  • vue.js select下拉框绑定和取值方法

    最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="

  • vue实现的下拉框功能示例

    本文实例讲述了vue实现的下拉框功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue下拉框</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js

  • 解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题

    1.创建vue项目 2.使用vant组件 npm install vant --S 全局引用时在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 假如你引入之后发现页面的样式和组件都挂载了,但是console控制台会报错,说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题,重新下载一个最新的vant就可以了,现在是2.6.0版本 好,接下来继续 在需要使用下拉

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • vue Treeselect 树形下拉框:获取选中节点的ids和lables操作

    API: https://vue-treeselect.js.org/#events 1.ids: 即value 1.lable: 需要用到方法:@select(node,instanceId) 和 @deselect(node,instanceId) <template> <treeselect ref="DRHA_EFaultModeTree" v-model="DRHA_EFaultModeTree_value" :multiple=&quo

  • Vue + Element-ui的下拉框el-select获取额外参数详解

    直接上代码吧~ <el-table-column label="用户类型" width="180"> <template slot-scope="scope"> <el-select v-model="scope.row.roleID" placeholder="请选择" @change="changeRole($event,scope)"> <

  • Vue封装远程下拉框组件的实现示例

    之前封装了一个远程搜索的输入框,静态在Vue官网看到一个类似的远程搜索下拉框,今天也封装一个远程搜索下拉框,面对不同的需求 我们修改了官方提供的代码来封装了 父组件 RemoteSearch.vue <template> <el-row> <el-select v-if="chooseFlag ==0" v-model="selectKey" :multiple="false" :filterable="t

  • jsp从数据库获取数据填充下拉框实现二级联动菜单的方法

    本文实例讲述了jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.分享给大家供大家参考,具体如下: 项目告一段落,现在将遇到的比较实用的东西记录下来,写了多遍了,谨记于此,以备查看! 1.首先在数据库中获取第一个下拉框的数据: <s:select listKey="tsFrom" id="t_tsfrom" cssClass="required" listValue="tsFrom" cssStyle="w

随机推荐