Input

Input

关注
发信
关注(28)粉丝(399)

如何使用 vue-multiselect 进行动态多重下拉

本文介绍了如何使用 vue-multiselect 进行动态多重下拉的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我不知道通过更改数据并自动加载特定组件的 vue 是否可以实现我的目标

以下是我的期望(在 jquery 中尝试过)

var data = {country:{type:'dropdown',values:['india','usa']},money:{类型:'输入'，占位符:'输入金额'}，印度:['班加罗尔']，美国:['硅谷']}函数 getDropTemplate(dropDownList){var dropDownStr = '';for(var i = 0; i < dropDownList.length; i++){dropDownStr += `<option value="${dropDownList[i]}">${dropDownList[i]}</option>`}return `<select class="mainCountry">${dropDownStr}</select>`;}函数 getInputTemplate(inputObj){return `<input type="text" placeholder="${inputObj.placeholder}"/>`}$(函数(){$('#dropdown').on('change',function(){var 值 = $(this).val(), 模板 = '';if(data[value].type == '下拉菜单'){模板 += getDropTemplate(data[value].values)}别的{模板 += getInputTemplate(data[value])}$('#selectedResults').html(模板);});$(document).on('change','.mainCountry',function(){var 结果 = 数据[$(this).val()]$('#subResults').html(getDropTemplate(result));});});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="下拉列表"><option value="">--select--</option><option value="money">Money</option><option value="country">Country</option></选择><div id="selectedResults">

<div id="subResults">

从上面的代码片段中，您可以通过选择 country ->印度 ->班加罗尔 或 country ->美国 ->硅谷

我想用 vue-multiselect

复制同样的东西

以下是我在 vue 中尝试过的

var app = new Vue({el: '#app',组件:{ 多选:window.VueMultiselect.default },数据 () {返回 {价值: []，//data:{country:{type:'dropdown',values:['india','usa']},money:{type:'input',placeholder:'enter amount'},india:['Bengaluru'],美国:['硅谷']}选项:[{name:'money'},{name:'country'}]}}})
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><;/脚本><script src="https://unpkg.com/vue-multiselect@2.1.0"></script><link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"><script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script><div id="应用程序"><多选v-model="值"跟踪= =名称":options="选项"标签=名称":multiple="假":taggable="假"></多选>

解决方案

您可以根据 category.name 有条件地渲染 input 或 multiselects>.

例如，当 category.name 是 Money 时，显示 :

</模板>

否则，当是Country时，显示两个multiselect(一个用于国家选择，另一个用于区域):

</多选><multiselect v-if="country &&国家.地区"占位符=选择一个区域"v-model=区域":options="country.regions";:multiple="false";:taggable="false"></多选></模板>

国家multiselect填充有countryOptions[](如下所示)，每个都有regions[]，用于填充区域 multiselect.这可确保显示的地区仅适用于所选国家/地区.

new Vue({数据() {返回 {类别:空，国家:空，地区:空，金额:空，categoryOptions: [{ name: 'Money' }, { name: 'Country' }],国家选项:[{name: '美国',地区:['硅谷'，'中西部']，},{name: '印度',地区:['班加罗尔']，}],}},})

演示

Hi i don't know whether what i'm trying to achieve is possible or not with vue for a particular component by changing its data and loading automatically

Below is my expection(tried in jquery)

var data = {country:{type:'dropdown',values:['india','usa']},money:{type:'input',placeholder:'enter amount'},india:['Bengaluru'],usa:['Silicon Valley']}


function getDropTemplate(dropDownList){
    var dropDownStr = '';
    for(var i = 0; i < dropDownList.length; i++){
       dropDownStr += `<option value="${dropDownList[i]}">${dropDownList[i]}</option>`
    }
   return `<select class="mainCountry">${dropDownStr}</select>`;
}

function getInputTemplate(inputObj){
   return `<input type="text" placeholder="${inputObj.placeholder}"/>`
}


$(function(){

   $('#dropdown').on('change',function(){
      var value = $(this).val(), template = '';
      if(data[value].type == 'dropdown'){
           template += getDropTemplate(data[value].values)
      }else{
          template += getInputTemplate(data[value])
      }

      $('#selectedResults').html(template);
   });

   $(document).on('change','.mainCountry',function(){
      var result = data[$(this).val()]
      $('#subResults').html(getDropTemplate(result));
   });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<select id="dropdown">
   <option value="">--select--</option>
   <option value="money">Money</option>
   <option value="country">Country</option>
</select>

<div id="selectedResults">

</div>

<div id="subResults">

</div>

From above snippet you can observe that by selecting country -> india -> Bengaluru or country -> usa -> Silicon Valley

I want to replicate the same thing with vue-multiselect

below is what i have tried in vue

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      value: [],
       //data:{country:{type:'dropdown',values:['india','usa']},money:{type:'input',placeholder:'enter amount'},india:['Bengaluru'],usa:['Silicon Valley']}

       options:[{name:'money'},{name:'country'}]
    }
  }
})
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>




<div id="app">

     <multiselect
    v-model="value"
     track-by="name"
    :options="options"
    label="name"
     :multiple="false"
    :taggable="false"
  ></multiselect>


</div>

解决方案

You could conditionally render the input or multiselects based on category.name.

For instance, when category.name is Money, show the <input>:

<template v-if="category && category.name === 'Money'">
  <input type="text" v-model="moneyAmount" placeholder="Enter amount">
</template>

Otherwise, when it's Country, show two multiselects (one for country selection, and the other for region):

<template v-else-if="category && category.name === 'Country'">
  <multiselect
               placeholder="Select a country"
               v-model="country"
               track-by="name"
               :options="countryOptions"
               label="name"
               :multiple="false"
               :taggable="false">
  </multiselect>

  <multiselect v-if="country && country.regions"
               placeholder="Select a region"
               v-model="region"
               :options="country.regions"
               :multiple="false"
               :taggable="false">
  </multiselect>
</template>

The country multiselect is populated with countryOptions[] (shown below), each of which has regions[], which is used to populate the region multiselect. This ensures the displayed regions are only applicable to the selected country.

new Vue({
  data() {
    return {
      category: null,
      country: null,
      region: null,
      moneyAmount: null,
      categoryOptions: [{ name: 'Money' }, { name: 'Country' }],
      countryOptions: [
        {
          name: 'USA',
          regions: ['Silicon Valley', 'Midwest'],
        },
        {
          name: 'India',
          regions: ['Bengaluru'],
        }
      ],
    }
  },
})

demo

这篇关于如何使用 vue-multiselect 进行动态多重下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 17:14
Powered by LMLPHP ©2024 Input 0.039601