Vue.js如何实现下拉组件可接收不同类型props并动态渲染options

核心优化思路 #

原有代码的问题本质是下拉框和数据源的映射关系没有动态绑定，导致要硬编码每个option的遍历逻辑。优化的核心是将下拉框标识和对应的数据源、配置项做绑定，统一传入组件，不需要单独声明每个数据源的props。

具体改造步骤 #

1. 调整父组件传参结构 #

把原来分开传的users/roles/cars等数据源，整合为一个配置数组，每个数组项包含对应下拉的所有配置（显示名、数据源、值字段、显示字段），后续新增下拉只需要往数组里加配置项即可：

<!-- parent.vue 改造后代码 -->
<template>
  <div class="first">
    <custom-dropdown
      title="Users Manager"
      instructions="Assign Role to User"
      :selectConfig="selectConfigUsers"
    >
    </custom-dropdown>
  </div>
  <div class="second">
    <custom-dropdown
      title="Cars Manager"
      instructions="Look at cars"
      :selectConfig="selectConfigCars"
    >
    </custom-dropdown>
  </div>
</template>

<script>
import customDropdown from "./customDropdown.vue";
export default {
  components: { customDropdown },
  data() {
    return {
      // 用户管理下拉配置
      selectConfigUsers: [
        {
          key: "users",
          label: "Users",
          options: [
            { uid: 1, name: "Ade", role: "standard" },
            { uid: 2, name: "Bab", role: "admin" },
            { uid: 3, name: "Cad", role: "super_admin" },
          ],
          valueKey: "uid",
          labelKey: "name"
        },
        {
          key: "roles",
          label: "Roles",
          options: [
            { rid: 1, name: "standard" },
            { rid: 2, name: "admin" },
            { rid: 3, name: "super_admin" },
          ],
          valueKey: "rid",
          labelKey: "name"
        }
      ],
      // 车辆管理下拉配置
      selectConfigCars: [
        {
          key: "cars",
          label: "Cars",
          options: [
            { cid: 1, type: "Audi", colour: "Red" },
            { cid: 2, type: "BMW", colour: "Black" },
          ],
          valueKey: "cid",
          labelKey: "type"
        }
      ]
    };
  },
};
</script>

2. 改造customDropdown组件 #

去掉原来硬编码的users、roles等props，直接用传入的配置动态渲染，不需要写死任何option遍历逻辑：

<!-- customDropdown.vue 改造后代码 -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <select
      v-for="(item, index) in selectConfig"
      :key="`select_${index}_${item.key}`"
      :name="item.key"
    >
      <option 
        v-for="(option, optIndex) in item.options" 
        :key="`opt_${optIndex}_${option[item.valueKey]}`" 
        :value="option[item.valueKey]"
      >
        {{ option[item.labelKey] }}
      </option>
    </select>
    <h2>{{ instructions }}</h2>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    instructions: {
      type: String,
    },
    selectConfig: {
      type: Array,
      required: true
    }
  }
};
</script>

改造效果 #

• 解决了多下拉option重复展示的问题，每个下拉只会渲染自身配置对应的选项
• 组件完全通用，不需要硬编码任何v-for逻辑，新增任意数量、任意结构的下拉都不需要修改组件代码，仅需要父层传入对应配置即可

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