最近,项目中有个需求:给select多选框增加一键全选的功能。 因为view-ui的select组件是不自带一键全选功能的,我决定自己封装一个。主要需求如下:
1.点击全选,选项全部勾选。
2.选项全部勾选情况下,点击全选,选项全部未勾选。
3.全选状态下,去掉任意一个选项,全选√消失。
一、三种情况分别如下:
1.
2.
3.
二、关键问题
要实现这些最关键的就是要清楚,select选中是通过v-model的双向绑定实现的。要改变select的选中值,就是通过改变v-model绑定的值实现。
三、部分代码如下:
<FormItem label="公司">
<Select
v-model="formItem.select"
@on-change="changeSelect"
multiple
filterable
>
<Checkbox v-model="checked" @on-change="selectAll">全选</Checkbox>
<Option v-for