ant design select placeholder不生效问题

最新推荐文章于 2024-12-12 21:38:14 发布

原创最新推荐文章于 2024-12-12 21:38:14 发布 · 502 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #ant

react 专栏收录该内容

29 篇文章

订阅专栏

本文探讨了在使用Ant Design的Select组件时遇到的问题：当value绑定为''或null时，placeholder无法正常显示。文中提供了修改value为undefined的解决方案。

ant design select placeholder不生效问题

项目中使用react, ant design 使用select的value绑定一个默认值时，如果默认值是’'或null时，placeholder不生效

解决方案

默认值直接使用 undefined

<a-form-item label="语音通知任务选择" >
   <a-select  placeholder="请选择语音通知任务" @change="handleChange" :disabled="flag" v-model="taskName">
    <a-select-option :value="item.id" v-for="(item,i) in dataList" :key="i">
          {{item.name}}
       </a-select-option>
    </a-select>
 </a-form-item>

if (res.status == 200 && res.data.code == 0) {
              const taskNameId = res.data.data.data.taskID;
              if(taskNameId !== 0) {
                let Task = this.dataList.filter((item => {
              return item.id === taskNameId
              }))[0]
              this.taskName = Task.name
              if(this.taskName ) {
                this.flag = true
              }
              } else {
                this.taskName = undefined
              }
          }