当前位置：首页 > article >正文

Antd框架中的Select组件placeholder不显示

article 2024/9/22 4:09:17

官方是这样说的：

placeholder 只有在 value = undefined 才会显示，对于其它的 null、0、'' 等等对于 JS 语言都是有意义的值。

所以原本我的代码是这样的,这样写placeholder的值是不会显示的

<template>
<a-form-item
  label="所属门店"
  name="shopId"
  :rules="[{ required: true, message: '请输入所属门店' }]"
>
  <a-select
    v-model:value="formState.shopId"
    :fieldNames="{ label: 'name', value: 'id' }"
    :options="options"
    placeholder="请选择所属门店"
    style="width: 200px"
  ></a-select>
</a-form-item>
</template>

<script lang='ts' setup>
const formState = reactive({
  shopId: "",
  model: 0,
  name: "",
  ylyTerminalNo: "",
  ylySecretKey: "",
});
</script>

解决办法：把shopId: " "改成shopId: undefined就行了

<template>
<a-form-item
  label="所属门店"
  name="shopId"
  :rules="[{ required: true, message: '请输入所属门店' }]"
>
  <a-select
    v-model:value="formState.shopId"
    :fieldNames="{ label: 'name', value: 'id' }"
    :options="options"
    placeholder="请选择所属门店"
    style="width: 200px"
  ></a-select>
</a-form-item>
</template>

<script lang='ts' setup>
const formState = reactive({
  shopId: undefined,
  model: 0,
  name: "",
  ylyTerminalNo: "",
  ylySecretKey: "",
});
</script>

查看全文

http://www.kler.cn/news/314164.html