Select 组件实现【全选】（基于 Element）
〇、前言在 Element 中，Select 组件支持单选和多选，但是并没有全选的属性，因此只能通过其事件和属性来实现，本文将实现一个简单的示例。
注意：本文的示例中，通过 leixing1 来兼容多控件共享同一方法。
一、两种实现
1.1 通过添加一个 Checkbox 来操作全选（推荐）
[*]大致思路
在全部选项最上边添加一个 Checkbox 复选框，勾选时自动全选，取消勾选自动取消全部已选中项。
再给 Select 添加一个 Change 事件方法，当选中项等于备选列表长度，则自动勾选 Checkbox，否则取消勾选。
[*]实现效果
[*]前端实现代码
<el-select
v-model="formData.leixing1"
filterable multiple
clearable @change="changeSelect($event,'leixing1')"
placeholder="全部类型（多选）"
>
<el-checkbox :indeterminate="isIndeterminate_lx" v-model="checked" @change="selectAll('leixing1')" >全选</el-checkbox>
<el-option
<el-select
v-model="formData.leixing1"
filterable multiple
clearable @change="changeSelect($event,'leixing1')"
placeholder="全部类型（多选）"
>
<el-option label='全选' value='全选' @click.native="selectAll('leixing1')" v-if="leixing1OptionsList.length"></el-option>
<el-option
v-for="item in leixing1OptionsList"
:label="item.mingcheng"
:value="item.bianma"
:key="item.bianma"
/>
</el-select>v-for="item in leixing1OptionsList"
<el-select
v-model="formData.leixing1"
filterable multiple
clearable @change="changeSelect($event,'leixing1')"
placeholder="全部类型（多选）"
>
<el-option label='全选' value='全选' @click.native="selectAll('leixing1')" v-if="leixing1OptionsList.length"></el-option>
<el-option
v-for="item in leixing1OptionsList"
:label="item.mingcheng"
:value="item.bianma"
:key="item.bianma"
/>
</el-select>:label="item.mingcheng"
<el-select
v-model="formData.leixing1"
filterable multiple
clearable @change="changeSelect($event,'leixing1')"
placeholder="全部类型（多选）"
>
<el-option label='全选' value='全选' @click.native="selectAll('leixing1')" v-if="leixing1OptionsList.length"></el-option>
<el-option
v-for="item in leixing1OptionsList"
:label="item.mingcheng"
:value="item.bianma"
:key="item.bianma"
/>
</el-select>:value="item.bianma"
<el-select
v-model="formData.leixing1"
filterable multiple
clearable @change="changeSelect($event,'leixing1')"
placeholder="全部类型（多选）"
>
<el-option label='全选' value='全选' @click.native="selectAll('leixing1')" v-if="leixing1OptionsList.length"></el-option>
<el-option
v-for="item in leixing1OptionsList"
:label="item.mingcheng"
:value="item.bianma"
:key="item.bianma"
/>
</el-select>:key="item.bianma"
/>
</el-select>
[*]js 代码实现
1.2 通过增加一个 Option 选项‘全选’来实现
[*]大致思路
手动增加 Select 的第一个选项‘全选’，通过这个选项的事件，来操作是否全选。
再通过列表的长度和已选中的选项进行比较，相等就自动勾选‘全选’，否则就取消勾选。
注意：Select 组件的值会包含‘全选’这个值，需要在后端进行过滤。
[*]实现效果
[*]前端控件代码
<el-select
v-model="formData.leixing1"
filterable multiple
clearable @change="changeSelect($event,'leixing1')"
placeholder="全部类型（多选）"
>
<el-option label='全选' value='全选' @click.native="selectAll('leixing1')" v-if="leixing1OptionsList.length"></el-option>
<el-option
v-for="item in leixing1OptionsList"
:label="item.mingcheng"
:value="item.bianma"
:key="item.bianma"
/>
</el-select>
[*]js 代码实现及解释
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]