vue3.0 + TS + AntD 项目开发学习笔记：Select 选择器的使用（一）

在项目开发中经常使用到 Select 选择器，这篇文章记录一下 Select 选择器的用法。

参考 antd 官方网站，有介绍 Select 选择器的基本使用方法，代码如下：

<a-select
      ref="select"
      v-model:value="value"
      style="width: 120px"
      :options="options"
      @change="handleChange"
    >
</a-select>
<script setup lang="ts">
  const value = ref('lucy')
  const options = ref<SelectProps['options']>([
      {
        value: 'jack',
        label: 'Jack',
      },
      {
        value: 'lucy',
        label: 'Lucy',
      },
      {
        value: 'disabled',
        label: 'Disabled',
        disabled: true,
      },
      {
        value: 'yiminghe',
        label: 'Yiminghe',
      }
    ]);
  const handleChange = (value: string) => {
      console.log(`selected ${value}`);
    };
</script>

这段代码是基本的使用，就是下拉选项就是定义的 options, 渲染效果如图所示：

但是我现在的需求是下拉选项中没有我需要的内容，我想要新增选项，代码可以做如下调整：

<a-select
      ref="select"
      v-model:value="value"
      style="width: 120px"
      :options="options"
      @change="handleChange"
    >
     <template #dropdownRender="{ menuNode: menu }">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 4px 0" />
              <div style="padding: 4px 8px; cursor: pointer" 
                @mousedown="(e: any) => e.preventDefault()"
                @click="addSubClass">
                <plus-circle-outlined />
                Add item
              </div>
    </template>
</a-select>
<script setup lang="ts">
  const value = ref('lucy')
  const options = ref<SelectProps['options']>([
      {
        value: 'jack',
        label: 'Jack',
      },
      {
        value: 'lucy',
        label: 'Lucy',
      },
      {
        value: 'disabled',
        label: 'Disabled',
        disabled: true,
      },
      {
        value: 'yiminghe',
        label: 'Yiminghe',
      }
    ]);
  const handleChange = (value: string) => {
      console.log(`selected ${value}`);
    };

  const addSubClass = () => {
  console.log(`add`);
 }

</script>

<script lang="ts">
export default {
  components: {
    VNodes: (_, { attrs }) => {
      return attrs.vnodes;
    }
  }
};
</script>

使用 dropdownRender 对下拉菜单进行自由扩展，渲染效果如下图所示：

在项目中要求下拉选项不是固定的，是可以实时搜索的，截取部分自己开发的项目中的代码如下：

<template>
    <div id="component-select">
        <a-select class="select" v-model:value="partNoValue" show-search placeholder="输入元件料号" :default-active-first-option="false"
            :show-arrow="false" :filter-option="false" :options="partNos" :not-found-content="spinning ? undefined : null"
            @search="searchPartNo" @change="onChange">
            <template v-if="spinning" #notFoundContent>
                <a-spin size="small" />
            </template>
        </a-select>
    </div>
</template>

<script setup lang="ts">
import { spinning } from '@/logic/useCustomer'
import { ref, toRefs } from 'vue'
import { useTrackingStore } from '@/store/modules/tracking';

const props = defineProps({
    partNo: { type: String, default: null }
})
const { partNo } = toRefs(props);
const partNoValue = partNo

// 料号下拉选项
const partNos = ref<any[]>([])
// 定义 emit 事件
const emit = defineEmits(['onChange']);
/**
 * 选项改变时触发
 */
const onChange = (value: string, option: any) => {
    console.log(value,option,'777');
    emit('onChange', value, option)
    // cancelPending()
}
let lastFetchId = 0
const searchPartNo = async (keyword: any) => {
    if (!keyword || keyword.length < 3) {
        return
    }
    lastFetchId += 1;
    const fetchId = lastFetchId;
    partNos.value = []
    spinning.value = true
    
    useTrackingStore().searchPartNo('', keyword.toUpperCase()).then((res: any) => {
        if (fetchId !== lastFetchId) {
            return;
        }
        const arr = res.map((el: any) => ({
            label: el.brand + ' ' + el.partNo,
            value: el.partNoId,
            brand: el.brand,
            partNo: el.partNo
        }))
        partNos.value = arr
        spinning.value = false
    })
}

</script>

这样就实现了一个带有远程搜索，节流控制，请求时序控制，加载状态的多选的应用了，渲染效果图如下：

代码中定义了一个参数 lastFetchId， 在每次触发请求后台数据时该参数就加 1，定义常量 fetchId, 并赋值为 lastFetchId, 在请求网络接口时判断这两个值是否相等，如果不等就代表请求数据不同步，所以此时不做处理，这就起到一个时序控制的作用。如果不加这段代码，就会造成下拉选项的值叠加的情况，并不是实时更新。

以上就是我在使用 Select 选择器学到的一些用法，简单做个记录。