Vue3使用Naive UI组件时如何使用n-select

前言：在利用vue3框架进行开发时尤大大推荐使用naive ui组件进行开发。这里来详解n-select的具体使用方法和功能。

1.使用n-select组件进行对接口数据的渲染

  <n-select
      :options="dpStaff" 
      placeholder="默认排序"
      clearable 
      filterable 
      label-field="name" value-field="id"  
      @update:value="changedpId"     
      v-model:value="dpStaffId">
    <template #arrow>       
        <ArrowDropDownFilled />
    </template>
</n-select>

2.下面对上述各个代码进行详解

:options="dpStaff"  接口传入来的数据，下面用例子来表示：

const dpStaffId = ref('')
 
let dpStaff = reactive([
    { id: 0, name: '张三' },
    { id: 1, name: '李四' },
    { id: 2, name: '王五' },
])

label-field="name" 这里name就是演示数据内的name

value-field="id" 这里id就是演示数据内的id

@update:value="changedpId" 为你选择的另一个人员后要进行的后续操作。

clearable 是否可以清空

filterable 是否可以搜索

v-model:value="dpStaffId" 展示到页面上的数据。

template内为自定义的图标，可以忽略。

3.最后附接口文档：选择器 Select - Naive UI