a-select 组件使用searchValue属性 搜索输入英文过程中占位符placeholder一直存在，去除searchValue就没有这个问题

[clearself]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.6

Environment

window,谷歌浏览器等，vue3.3.9

Reproduction link

http://flypa.cn

Steps to reproduce

a-select 组件使用searchValue属性 搜索输入英文过程中占位符placeholder一直存在，去除searchValue就没有这个问题

What is expected?

searchValue属性 搜索输入英文过程中占位符placeholder消失

What is actually happening?

a-select 组件使用searchValue属性 搜索输入英文过程中占位符placeholder一直存在，去除searchValue就没有这个问题

[AiFu-o]

可以给一个示例吗

[AiFu-o]

http://flypa.cn/这个我打不开

[clearself]

完整代码示例：

  <!-- page-select 组件封装（下拉滚动分页组件） -->
<template>
  <a-select
    popupClassName="page-select-box"
    show-search
    allowClear
    style="width: 100%"
    optionFilterProp="label"
    v-model:value="selectedKey"
    :placeholder="placeholder"
    :disabled="disabled"
    :virtual="false"
    :filterOption="false"
    :search-value="searchValue"
    @popupScroll="handlePopupScroll"
    @search="searchFun"
    @change="changeVal"
    @clear="changeValClear"
    @dropdownVisibleChange="dropdownVisibleChange"
  >
    <a-select-option v-for="(item, index) in optionsList" :key="index" :value="item.value">{{
      item.label
    }}</a-select-option>
    <a-select-option v-if="hasmore" class="select-disabled" disabled>
      <div class="ub w100 ub-ac ub-pc">
        <a-spin size="small" />
      </div>
    </a-select-option>
  </a-select>
</template>
<script setup lang="ts">
import { request } from '@/utils/service'
import { ref, onMounted, computed } from 'vue'
import { debounce } from 'lodash-es'
import { v4 as uuidv4 } from 'uuid'
const emit = defineEmits(['update:value', 'change'])
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  api: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  immediate: {
    type: Boolean,
    default: false
  },
  fieldNames: {
    type: Object,
    default: () => {
      return {
        label: 'label',
        value: 'value'
      }
    }
  },
  joinFields: {
    type: Array,
    default: () => []
  },
  query: {
    type: Object,
    default: () => {}
  }
})
const isOpen = ref<boolean>(false)
const page = ref(1)
const pageSize = ref(10)
const totalPage = ref(0)
const selectedKey = computed({
  get() {
    return props.value ? props.value : undefined
  },
  set(val) {
    emit('update:value', val)
    emit('change', val)
  }
})
const searchValue = ref('')
let uuid = uuidv4()
interface OptionsList {
  label: string
  value: string | number
}
const optionsList = ref<OptionsList[]>([])
const dropdownVisibleChange = (open: boolean) => {
  console.log(open, 'open')
  isOpen.value = open
}
const changeVal = (val: string | number) => {
  console.log(val, '99999999999')
  if (val === undefined) {
    searchValue.value = ''
    page.value = 1
    totalPage.value = 0
    initList()
  }
}
const changeValClear = () => {
  searchValue.value = ''
}
const searchFun = debounce((value: string) => {
  console.log(value, 'searchValue')
  searchValue.value = value
  page.value = 1
  totalPage.value = 0
  initList()
}, 500)
const hasmore = computed(() => {
  let _boolean = false
  if (isOpen.value) {
    if (page.value < totalPage.value) {
      _boolean = true
    }
  } else {
    _boolean = false
  }
  return _boolean
})

const requestData = () => {
  return request<ApiResponseData>({
    method: 'GET',
    url: props.api,
    params: { ...props.query, ...{ pageNum: page.value, pageSize: pageSize.value, searchKey: searchValue.value } }
  })
}
const isItemObj = (item: any) => {
  return item && typeof item === 'object'
}
const handelLabel = (item: any) => {
  if (props.joinFields.length === 0) {
    return item[props.fieldNames.label]
  } else {
    const arr = []
    arr.push(item[props.fieldNames.label])
    props.joinFields.forEach((e: any) => {
      if (item[e]) {
        arr.push(item[e])
      }
    })

    return arr.join('/')
  }
}
// 数据初始化
const initList = async () => {
  uuid = uuidv4()
  const _uuid = uuid
  if (!props.api) {
    return
  }
  const res = await requestData()
  if (_uuid !== uuid) {
    return
  }
  if (res?.code === 200) {
    const { total = 0, data = [] } = res
    if (page.value === 1) {
      optionsList.value = data.map((item: any) => ({
        label: isItemObj(item) ? handelLabel(item) : item,
        value: isItemObj(item) ? item[props.fieldNames.value] : item
      }))
    } else {
      const list = data.map((item: any) => ({
        label: isItemObj(item) ? handelLabel(item) : item,
        value: isItemObj(item) ? item[props.fieldNames.value] : item
      }))
      optionsList.value = optionsList.value.concat(list)
    }
    totalPage.value = Math.ceil(total / pageSize.value)
  }
}
// 刷新数据
const refresh = () => {
  page.value = 1
  initList()
}
// 重置数据
const reset = () => {
  page.value = 1
  searchValue.value = ''
  totalPage.value = 0
  optionsList.value = []
}
const handlePopupScroll = (e: any) => {
  const { scrollHeight, scrollTop, clientHeight } = e.target
  //这里就是通过滚动条判断是否触底，如果触底了就让页码page加1并判断是否小于总数，执行函数
  if (scrollHeight - scrollTop <= clientHeight + 1) {
    page.value = page.value + 1
    if (page.value <= totalPage.value) {
      initList()
    } else {
      page.value = totalPage.value
    }
  }
}
defineExpose({
  refresh,
  reset
})
onMounted(() => {
  if (props.immediate) {
    initList()
  }
})
</script>
<style lang="scss">
.page-select-box .ant-select-item-option-disabled.select-disabled {
  cursor: default !important;
}
.page-select-box.ant-select-dropdown .ant-select-item-option-content {
  white-space: normal !important;
  word-break: break-all;
}
</style>

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days