Abai的Blog

导航

PC端管理项目中支持多选和单选的下拉框写法区别

只能单选的下拉框:

<div class="item carPlate">
<div class="label">车牌:</div>
<Select v-model="params.carIds" filterable :max-tag-count="1">
<Option v-for="item in carList" :value="item.id" :key="item.id">
{{ item.licensePlateNumber }}
</Option>
</Select>
</div>

可以选中多个下拉列表里的值,传给后端的下拉框:(后端接口也要支持接收数组类型的值,相反如果后端接口接收的是数组类型的值,前端代码改成上面那样只传过去1个值,那么控制台会报接口ArrayList类型接收错误的异常,报错的大意就是说接口规定前端要传给后端1个数组类型的,结果传了1个单独的值)

<div class="item carPlate">
<div class="label">车牌:</div>
<Select v-model="params.carIds" filterable multiple :max-tag-count="1">
<Option v-for="item in carList" :value="`${item.id}`" :key="item.id">
{{ item.licensePlateNumber }}
</Option>
</Select>
</div>

二者的区别就在于:
①filterable后面加不加multiple(不加就是单选,加了就可以多选)
②value=后面是"`${item.id}`"还是:item.id(前者是多选的写法,后者是单选的)

posted on 2022-04-24 20:23  Abai的Blog  阅读(105)  评论(0编辑  收藏  举报