如何绑定Vue JSON Schema与Element-UI Select并实现动态接口请求？

Alright, I’ve dealt with this exact need before—getting dynamic options into an Element UI select that’s tied to vue-json-schema. The core trick is to wrap the default el-select in a custom component that handles the API request when the dropdown is opened. Let’s break this down:

1. Build a Custom Dynamic Select Component #

First, create a reusable component (let’s call it DynamicElSelect) that wraps el-select and adds the logic to fetch options when the dropdown becomes visible. We’ll use Element UI’s visible-change event (it triggers when the dropdown shows/hides, which is more reliable than a simple click):

<template>
  <el-select
    v-bind="$attrs"
    v-model="localValue"
    @visible-change="onDropdownVisible"
    :loading="isLoading"
  >
    <el-option
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    />
  </el-select>
</template>

<script>
export default {
  name: 'DynamicElSelect',
  props: {
    value: {
      type: String,
      default: ''
    },
    // Pass your API endpoint via schema attrs
    apiUrl: {
      type: String,
      required: true
    },
    // Optional: Add if you need to pass params to the API
    apiParams: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      localValue: this.value,
      options: [],
      isLoading: false,
      hasLoaded: false // Prevent duplicate requests
    }
  },
  watch: {
    value(newVal) {
      this.localValue = newVal
    },
    localValue(newVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    async onDropdownVisible(isVisible) {
      // Only fetch if dropdown is showing and we haven't loaded data yet
      if (isVisible && !this.hasLoaded) {
        this.isLoading = true
        try {
          // Replace with your HTTP client (axios, fetch, etc.)
          const response = await this.$axios.get(this.apiUrl, {
            params: this.apiParams
          })
          // Assume your API returns [{ label: '...', value: '...' }, ...]
          this.options = response.data
          this.hasLoaded = true
        } catch (err) {
          console.error('Failed to load select options:', err)
          // Add error handling here (e.g., show an Element UI toast)
        } finally {
          this.isLoading = false
        }
      }
    }
  }
}
</script>

2. Register the Custom Component with FormSchema #

In your Vue app’s entry file (or wherever you initialize vue-json-schema), register the custom component so FormSchema can use it:

import DynamicElSelect from '@/components/DynamicElSelect.vue'
FormSchema.setComponent('dynamic-select', DynamicElSelect)

3. Update Your JSON Schema #

Now you can reference the custom component in your schema, and pass the API endpoint via the attrs object:

"lists": {
  "type": "string",
  "title": "List",
  "component": "dynamic-select", // Use our custom component
  "attrs": {
    "placeholder": "Select your list subscription",
    "title": "Please select your list subscription",
    "apiUrl": "/api/subscription-lists", // Your API endpoint
    "apiParams": { // Optional: Pass any needed params
      "userId": 123
    }
  }
}

Quick Tweaks for Different Needs #

• If you want to refresh options every time the dropdown opens, remove the hasLoaded check
• If your API returns data in a different format, adjust the mapping inside the try block (e.g., this.options = response.data.map(item => ({ label: item.name, value: item.id })))
• Add user-facing error feedback (like an Element UI toast) to let users know if the request fails

That’s it—now when users click the select dropdown, it’ll automatically fetch options from your API and populate the list.

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