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

2024-06-01 • 问答

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

以下是我的期望（在 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>

从上面的片段中，您可以通过选择 country -> india -> Bengaluru 或 country -> usa -> Silicon Valley

观察到

我想用 vue-multiselect

复制同样的东西

以下是我在 vue 中尝试过的

var app = new Vue({
  el: '#app',components: { Multiselect: window.VueMultiselect.default },data () {
    return {
      value: [],//data:{country:{type:'dropdown',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>

iCMS 回答：如何使用 vue-multiselect 进行动态多重下拉

您可以根据 input 有条件地呈现 multiselects 或 category.name。

例如，当 category.name 为 Money 时，显示 <input>：

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

否则，当它是 Country 时，显示两个 multiselect（一个用于国家选择，另一个用于区域）：

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

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

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

您是否尝试根据从下拉列表中选择的选项有条件地呈现组件？

如果是这样，为什么不使用 v-if - 请参阅文档中如何有条件地呈现组件 https://vuejs.org/v2/guide/conditional.html

           <MapView
                style={styles.map}
                initialRegion={{
                    latitude: initialLocation.latitude,longitude: initialLocation.longitude,latitudeDelta: 0.01,longitudeDelta: 0.01
                }}
            >
                <Circle
                    center={currentLocation.coords}
                    radius={30}
                    strokeColor='rgba(158,158,255,1.0)'
                    fillColor='rgba(0,0.3)'
                />
                {drawLine && (
                    <MapView.Polyline
                        coordinates={locations.map(loc => {
                            return {
                                latitude: loc.coords.latitude,longitude: loc.coords.longitude
                            };
                        })}
                        strokeColor='red'
                        strokeWidth={1}
                    />
                )}
            </MapView>

javascript vue-multiselect vue.js vuejs3

本文链接：https://www.f2er.com/119895.html

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

iCMS 回答：如何使用 vue-multiselect 进行动态多重下拉

大家都在问