select-remote支持检索quickSearch

最新推荐文章于 2023-07-12 13:50:26 发布

Lilico_

最新推荐文章于 2023-07-12 13:50:26 发布

阅读量296

点赞数

分类专栏：工作心得

本文链接：https://blog.csdn.net/Lilico_/article/details/115318695

版权

工作心得专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这是一个关于前端UI组件的示例，展示了一个使用AJAX获取远程数据的下拉选择框。该组件用于搜索和选择车辆，显示车牌号、车主姓名和序列号等关键信息。它与后台服务交互，通过GET请求获取复杂的数据，并具备清除功能。

摘要由CSDN通过智能技术生成

 <select-remote :ajax="{ get: { action: 'GET /service/complex', params:value => ({quickSearch: value,excludedServiceId: form.data.id,notComplete: true, rsexp: 'id,serialNo,customer[name],vehicle[plateNo],serviceMaterialStatus'}) } }" :props="{ label: 'serialNo', value: '' }" clearable value-key="id" v-model="transfer.vehicleData">
  <div slot-scope="{ option }">
     <div style="display: flex; justify-content: space-between;">
       <span>{{option.vehicle && option.vehicle.plateNo}}</span>
       <span style="padding: 0 10px">{{option.customer &&  option.customer.name}}</span>
       <span>{{option.serialNo}}</span>
     </div>
   </div>
 </select-remote>