view-ui中select全选实现

最近，项目中有个需求：给select多选框增加一键全选的功能。因为view-ui的select组件是不自带一键全选功能的，我决定自己封装一个。主要需求如下：
1.点击全选，选项全部勾选。
2.选项全部勾选情况下，点击全选，选项全部未勾选。
3.全选状态下，去掉任意一个选项，全选√消失。
一、三种情况分别如下：
1.

2.

3.

二、关键问题
要实现这些最关键的就是要清楚，select选中是通过v-model的双向绑定实现的。要改变select的选中值，就是通过改变v-model绑定的值实现。
三、部分代码如下：

<FormItem label="公司"><Selectv-model="formItem.select"@on-change="changeSelect"multiplefilterable><Checkbox v-model="checked" @on-change="selectAll">全选</Checkbox><Option v-for="item in coList" :key="item.id" :value="item.id">{{item.name}}</Option></Select>
</FormItem>

  data() {return {coList: [{ id: 1, name: "百度" },{ id: 2, name: "腾讯" },{ id: 3, name: "阿里" },{ id: 4, name: "字节" },{ id: 5, name: "平安" },{ id: 6, name: "网易" },],checked: false,selectedArray: [],};},

  methods: {selectAll() {/* Checkbox被选中 */if (this.checked) {this.selectedArray = [];/* 通过遍历coList数组,将item.id全部添加进selectArray这个数组 */this.coList.map((item) => {this.selectedArray.push(item.id);});/* 将选择框select通过v-model进行双向绑定的formItem.select进行以下赋值下列式子相当于this.formItem.select = [1,2,3,4,5,6] */this.formItem.select = this.selectedArray;} /* Checkbox未被选中 */ else {this.formItem.select = "";}},changeSelect(e) {if (e.length === this.coList.length) {this.checked = true;} else {this.checked = false;}},},

至此，大功告成。

view-ui中select全选实现相关推荐

android gridview item添加checkbox,手把手教你实现GridView中Checkbox全选
全选效果图这节讲得相对比较基础的东西,高手请忽略. 首先新建一个GridviewAdapter继承BaseAdapter public class GridviewAdapter extends B ...
React移动端中实现全选和不选的实现
React移动端中实现全选和不选的实现 React移动端中实现点击全选,数据全部选择,数据有一个不选择,全选就不选下面是一种实现方式,其中的 data 表示要选择的数据列表,每个数据对象中有一个 c ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
php反选全选代码,jQuery中实现全选，反选实例代码（推荐）
1.概述在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example 请选择想要学习的编程语言: 全选全不选反选 JavaScript Python Ruby Haskel ...
计算机中完成全选的快捷键,怎么全选-很实用！word中全选的快捷键介绍及使用方法...
全选快捷键可以提高我们在操作word时工作效率,在操作Word2003中怎么对文档中的文字进行全选呢?下面为大家提供几种全选的方法,绝对好用.Word怎样全选? 方法一.使用Word全选快捷键&quo ...
element中checkbox全选反选功能
单循环: <el-button @click="handleLimit(scope.row)"type="warning"icon="el-ic ...
html'中select多选,在HTML中select标签如何实现单选和多选
在HTML中select标签如何实现单选和多选发布时间:2020-09-29 17:01:54 来源:亿速云阅读:105 作者:小新这篇文章主要介绍了在HTML中select标签如何实现单选和多 ...
vue中实现全选多选
一.给全选框绑定点击事件 HTML: <div class="fixedLef" @click="chooseAllCart"><input ...
jQuery中实现全选功能时使用attr( )改变checked值只能生效一次的问题
2019独角兽企业重金招聘Python工程师标准>>> 在jQuery中操作多选框checked数据不能使用attr()方法改变checked值, 要使用prop( )方法; 问题解 ...

view-ui中select全选实现

view-ui中select全选实现相关推荐

最新文章

热门文章