如何使用vue-multiselect实现动态多级下拉联动功能

你这个需求用Vue实现非常顺畅，核心是利用Vue的数据驱动特性，不需要手动操作DOM，靠响应式变量控制不同组件的渲染即可，完整实现代码如下：

完整实现代码 #

HTML部分 #

<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="selectedFirstLevel"
    track-by="name"
    :options="firstLevelOptions"
    label="name"
    :multiple="false"
    :taggable="false"
    placeholder="请选择类型"
  ></multiselect>

  <!-- 选了money的情况：显示金额输入框 -->
  <input 
    v-if="selectedFirstLevel?.name === 'money'" 
    type="text" 
    :placeholder="formConfig.money.placeholder"
    v-model="amountInput"
    style="margin-top:10px; padding:5px; width:300px"
  >

  <!-- 选了country的情况：显示二级国家选择 -->
  <div v-if="selectedFirstLevel?.name === 'country'" style="margin-top:10px">
    <multiselect
      v-model="selectedCountry"
      track-by="name"
      :options="countryOptions"
      label="name"
      :multiple="false"
      :taggable="false"
      placeholder="请选择国家"
    ></multiselect>
  </div>

  <!-- 选了国家之后：显示三级城市选择 -->
  <div v-if="selectedCountry" style="margin-top:10px">
    <multiselect
      v-model="selectedCity"
      track-by="name"
      :options="cityOptions"
      label="name"
      :multiple="false"
      :taggable="false"
      placeholder="请选择城市"
    ></multiselect>
  </div>
</div>

JS部分 #

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      // 配置数据和你jQuery里的一致
      formConfig: {
        country:{type:'dropdown',values:['india','usa']},
        money:{type:'input',placeholder:'enter amount'},
        india:['Bengaluru'],
        usa:['Silicon Valley']
      },
      // 一级选项
      firstLevelOptions:[{name:'money'},{name:'country'}],
      // 响应式选中变量
      selectedFirstLevel: null,
      selectedCountry: null,
      selectedCity: null,
      amountInput: ''
    }
  },
  computed: {
    // 国家列表，动态转成multiselect需要的格式
    countryOptions() {
      return this.formConfig.country.values.map(item => ({name: item}))
    },
    // 城市列表，根据选中的国家动态返回对应的数据
    cityOptions() {
      if(!this.selectedCountry) return []
      return this.formConfig[this.selectedCountry.name].map(item => ({name: item}))
    }
  }
})

核心逻辑说明 #

• 全程靠Vue的响应式特性驱动，不需要手动操作DOM修改节点内容，只要修改对应变量的值，视图会自动更新
• 用v-if指令判断当前选中的层级，按需渲染对应组件：选中money就显示输入框，选中country就显示国家下拉，选中国家后自动显示城市下拉
• 国家和城市的选项用计算属性动态生成，不需要手动赋值，依赖的变量变化后会自动更新选项列表

内容的提问来源于stack exchange，提问作者Learner