antdv 笔记

1. 去除前后空格

说明:

• 在 非 <a-form> 中使用，直接加 .trim 即可
• 在 <a-form> 中使用，需要额外加上 .lazy, 否则输入不了空格

示例:

<template>
  <!--
    直接使用 trim
  -->
  <a-input v-model:value.trim="formModel.name1" />


  <a-form>
    <a-form-item>
    <!--
      加上 .lazy , 输入框 input 时不会同步数据，修改并 blur 之后才会同步数据
    -->
      <a-input v-model:value.trim.lazy="formModel.name2" />
    </a-form-item>
  </a-form>
</template>

2. 自定义 select 的 option

说明:

• 自定义 下拉选项 建议使用 option 插槽

示例：

<template>
  <!-- 方式 1 -->
  <a-select v-model:value="formModel.id" :options="options">

    <template #option="{ value, label }">
      <span>{{ label }}</span>
    </template>
    
  </a-select>

  <!-- 方式 2 -->
  <a-select v-model:value="formModel.id">

    <!-- a-select-option 的方法体会被忽略，原因未知 -->
    <a-select-option 
      v-for="(item, index) in options" :key="index" 
      :value="item.value"
      :label="item.label"
    />
    
  </a-select>

</template>
<script>
export default {
  data() {
    return {
      formModel: {
        id: 'val-1',
      },
      
      options: [
        { value: 'val-1', label: 'label-1' },
        { value: 'val-2', label: 'label-2' },
      ]
    };
  },
};
</script>