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: '王五' },
])

function changedpId(id,options){
   dpStaffId.value = id
   console.log(id)
   console.log(options)
}

1. label-field="name" 这里name就是演示数据内的name
2. value-field="id"      这里id就是演示数据内的id
3. @update:value="changedpId"  为你选择的另一个人员后要进行的后续操作,点击切换选择就切换到对应name的id。
4. clearable 是否可以清空
5. filterable 是否可以搜索
6. v-model:value="dpStaffId"  展示到页面上的name。
7. template内为自定义的图标，可以忽略。

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