Element UI el-select 从远端加载数据

最近做项目用到了Element UI 的 el-select 组件，我的需求是想要从远端服务器直接加载options，加载的时候有个loading，但是Element UI 文档只给出了从远端搜索的案例，用起来不方便，于是经过一番摸索，找到了一个解决方案，可以通过el-select 自带的visible-change事件来实现，这样用户体验应该会更好。

源码：

复制
<template>
  <div>
    <el-select
      v-model="formInline.sex"
      :loading="loading"
      placeholder="请选择"
      loading-text="加载中..."
      @visible-change="handleSex"
    >
      <el-option
        v-for="(item,index) in sexOptions"
        :key="index"
        :label="item"
        :value="item"
      />
    </el-select>
  </div>
</template>
 
<script>
import { getEnumValueList } from '@/api/dict.js';
 
export default {
  data() {
    return {
      sexOptions: [],
      loading: false
    };
  },
 
  computed: {},
 
  created() {},
 
  async mounted() {},
 
  methods: {
    async handleSex(val) {
      if (val && !this.sexOptions.length) {
        this.loading = true;
        const result = await getEnumValueList('SexEnum');
        if (!result.success) {
          this.$message.error(`获取枚举失败：${result.msg}`);
          this.loading = false;
          return;
        }
        this.loading = false;
        this.sexOptions = result.data;
      }
    }
  }
};
</script>
 
<style>
 
</style>

效果：