标签 vue 下的文章

antd 版本：v3+

a-select-option 用法：

<a-select v-model:value="value">
  <a-select-option value="jack">Jack</a-select-option>
  <a-select-option value="lucy">Lucy</a-select-option>
  <a-select-option value="disabled" disabled>Disabled</a-select-option>
  <a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>

这种方法可以自定义 option 内容，但是需要 v-for 手动遍历渲染 a-select-option。

options 数组用法：

<template>
  <a-select v-model:value="value" :options="options">
    <template #option={ label, value, 其他 options 数组对象中的属性 }>
      <!-- 自定义 option -->
    </template>
  </a-select>
</template>

<script lang="ts">
const options = [
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana' },
]
</script>

这种用法不需要手动遍历，直接在 option 插槽自定义即可。

在自定义下拉框内容的场景下也可以自定义 option 的展示，需要和 option 插槽配合：

<template>
  <a-select
    v-model:value="value"
    :options="options"
  >
    <template #dropdownRender="{ menuNode: menu }">
      <!-- option 节点 -->
      <v-nodes :vnodes="menu" />
      <!-- 自定义内容 -->
    </template>
    <template #option={ label, value, 其他 options 数组对象中的属性 }>
      <!-- 自定义 option -->
    </template>
  </a-select>
</template>

<script lang="ts">
const options = [
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana' },
]
</script>

场景：显示用户信息的组件，通过路由中的 id 显示不同的用户信息。

<router-view /> 会缓存组件，即便路由的 id 不一样，组件也不会重新加载。

解决问题的关键就是给 <router-view :key="xxx" /> 设置不同的 key，如使用路径参数 $route.params.id，或 query 参数 $route.query.id。