Vue+Ant Design进行大数据量下拉框卡顿与表单提交优化

<a-select
  v-decorator="['mediaAdId']"
  show-search
  option-filter-prop="children"
>
  <a-select-option 
    v-for="item in mediaAdSlotList" 
    :key="item.mediaAdId"
    :value="item.mediaAdId"
  >
    {{ item.mediaAdId }}
  </a-select-option>
</a-select>

// 子组件
handleSubmit() {
  apiCall().then(res => {
    this.$message.success("操作成功")  // 第一次提示
    this.$emit('success')  // 父组件可能再次提示
  })
}

// 父组件
<child-component @success="showSuccess" />

methods: {
  showSuccess() {
    this.$message.success("操作成功")  // 第二次提示
  }
}

<a-select
  v-decorator="['mediaAdId']"
  show-search
  :options="mediaAdSlotOptions"
  :virtual-scroll="{
    itemSize: 32,  // 每个选项高度
    height: 256   // 下拉框高度
  }"
/>

computed: {
  mediaAdSlotOptions() {
    return this.mediaAdSlotList.map(item => ({
      label: item.mediaAdId,
      value: item.mediaAdId
    }))
  }
}

async fetchMediaAdSlotList(page = 1, pageSize = 100) {
  const { data } = await api.getMediaAdSlots({ page, pageSize })
  if (page === 1) {
    this.mediaAdSlotList = data
  } else {
    this.mediaAdSlotList.push(...data)
  }
}

methods: {
  handleSearch: debounce(async (keyword) => {
    if (!keyword) return
    const { data } = await api.searchMediaAdSlots({ keyword })
    this.mediaAdSlotList = data
  }, 500)
}

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(async (keyword) => {
    // 搜索逻辑
  }, 500)
}

// 子组件
handleSubmit() {
  apiCall().then(res => {
    this.$message.success("操作成功")  // 仅在这里提示
    this.$emit('success')  // 父组件只刷新数据
  })
}

// 父组件
<child-component @success="handleRefreshData" />

methods: {
  handleRefreshData() {
    this.fetchData()  // 不显示提示
  }
}

// 子组件
this.$emit('success', '操作成功')

// 父组件
<child-component @success="(msg) => $message.success(msg)" />

// API 调用
api.postData(params, { skipMessage: true })

// 拦截器
axios.interceptors.response.use(res => {
  if (res.config.skipMessage) return res
  if (res.data.success) {
    Message.success(res.data.message)
  }
  return res
})

<template>
  <a-select
    v-decorator="['mediaAdId']"
    show-search
    :options="mediaAdSlotOptions"
    :virtual-scroll="{ itemSize: 32, height: 256 }"
    @search="handleSearch"
  />
</template>

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      mediaAdSlotList: []
    }
  },
  computed: {
    mediaAdSlotOptions() {
      return this.mediaAdSlotList.map(item => ({
        label: item.mediaAdId,
        value: item.mediaAdId
      }))
    }
  },
  methods: {
    handleSearch: debounce(async (keyword) => {
      const { data } = await api.searchMediaAdSlots({ keyword })
      this.mediaAdSlotList = data
    }, 500)
  }
}
</script>

// 子组件
handleSubmit() {
  apiCall().then(res => {
    this.$message.success("操作成功")
    this.$emit('success')  // 父组件只刷新数据
  })
}

// 父组件
<child-component @success="fetchData" />