vue中el-checkbox全選、反選、多選的實現(xiàn)
更新時間：2023年05月16日 16:29:39 作者：粽子師兄
這篇文章主要介紹了vue中el-checkbox全選、反選、多選的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue el-checkbox全選、反選、多選
描述：實現(xiàn)對一組數(shù)據進行全選，反選、多選操作
- 全選
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
this.checkInvert = false;
}- 反選
handleInvertCheckChange(val) {
let cities = this.cities;
let checkedCities = this.checkedCities;
if (checkedCities.length === 0) {
checkedCities = val ? cities : [];
} else if (checkedCities.length === cities.length) {
this.checkedCities = [];
this.checkAll = false;
} else {
let list = cities.concat(checkedCities).filter((v, i, array) => {
return array.indexOf(v) === array.lastIndexOf(v);
});
this.checkedCities = list;
}
}- 多選
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.cities.length;
this.checkInvert = false;
}完整代碼
<template>
<div>
<el-checkbox
v-model="checkAll"
@change="handleCheckAllChange"
:indeterminate="isIndeterminate"
>全選</el-checkbox
>
<el-checkbox v-model="checkInvert" @change="handleInvertCheckChange"
>反選</el-checkbox
>
<el-checkbox-group
v-model="checkedCities"
@change="handleCheckedCitiesChange"
>
<el-checkbox v-for="city in cities" :label="city" :key="city">{{
city
}}</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ["上海", "北京", "廣州", "深圳"];
export default {
data() {
return {
checkAll: false,
checkInvert: false,
checkedCities: ["上海", "北京"],
cities: cityOptions,
isIndeterminate: true,
};
},
methods: {
// 全選
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
this.checkInvert = false;
},
// 反選
handleInvertCheckChange(val) {
let cities = this.cities;
let checkedCities = this.checkedCities;
if (checkedCities.length === 0) {
checkedCities = val ? cities : [];
} else if (checkedCities.length === cities.length) {
this.checkedCities = [];
this.checkAll = false;
} else {
let list = cities.concat(checkedCities).filter((v, i, array) => {
return array.indexOf(v) === array.lastIndexOf(v);
});
this.checkedCities = list;
}
},
// 多選
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.cities.length;
this.checkInvert = false;
},
},
};
</script>
<style>
</style>checkbox多選框，indeterminate 狀態(tài)
舉個例子。比如選擇星期。一周七天
2種方法。思密達。。。。第一種帶局限性。笨辦法，也發(fā)出來大家看看（推薦使用第二種）
這是方式的值是組件自帶的值方式
const cityOptions = ['周一', '周二', '周三', '周四','周五','周六','周天']
<template>
? <div>
? ? <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
? ? <div style="margin: 15px 0;"></div>
? ? <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
? ? ? <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
? ? </el-checkbox-group>
? </div>
</template>
<script>
? const cityOptions = ['周一', '周二', '周三', '周四','周五','周六','周天']
? export default {
? ? data() {
? ? ? return {
? ? ? ? checkAll: false,
? ? ? ? checkedCities: [],
? ? ? ? cities: cityOptions,
? ? ? ? isIndeterminate: true,
? ? ? ? arr:[]
? ? ? }
? ? },
? ? methods: {
? ? ? handleCheckAllChange(val) {
? ? ? ? let tempArr = []
? ? ? ? this.checkedCities = val ? cityOptions : []
? ? ? ? this.isIndeterminate = false
? ? ? ? // console.log(this.checkedCities)
? ? ? ? // console.log(val)
? ? ? ? if (this.checkedCities != []) {
? ? ? ? ? ? ? if(val == true){
? ? ? ? ? ? ? ? tempArr = [1,2,3,4,5,6,0]
? ? ? ? ? ? ? ? this.arr = tempArr
? ? ? ? ? ? ? }else if(val==false){
? ? ? ? ? ? ? ? tempArr = []
? ? ? ? ? ? ? ? this.arr = tempArr
? ? ? ? ? }
? ? ? ? }
? ? ? ? console.log(this.arr)
? ? ? },
? ? ? handleCheckedCitiesChange(value) {
? ? ? ? let checkedCount = value.length;
? ? ? ? this.checkAll = checkedCount === this.cities.length;
? ? ? ? this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
? ? ? ? var tempArr = []
? ? ? ? for(let i=0;i<value.length;i++){
? ? ? ? ? if(value[i] === '周一') {
? ? ? ? ? ? tempArr.push(1)
? ? ? ? ? }else if(value[i] === '周二'){
? ? ? ? ? ? tempArr.push(2)
? ? ? ? ? }else if(value[i] === '周三'){
? ? ? ? ? ? tempArr.push(3)
? ? ? ? ? }else if(value[i] === '周四'){
? ? ? ? ? ? tempArr.push(4)
? ? ? ? ? }else if(value[i] === '周五'){
? ? ? ? ? ? tempArr.push(5)
? ? ? ? ? }else if(value[i] === '周六'){
? ? ? ? ? ? tempArr.push(6)
? ? ? ? ? }else if(value[i] === '周天'){
? ? ? ? ? ? tempArr.push(0)
? ? ? ? ? }
? ? ? ? }
? ? ? ? this.arr = tempArr
? ? ? ? console.log(this.arr)
? ? ? }
? ? }
? }
</script>
<style scoped>
</style>之后UP想了一下。不對。后臺反過來的數(shù)組不應該是這種。大部分都應該是obj的形式
于是乎。
const cityOptions = [{a:'周一',b:1}, {a:'周二',b:2}, {a:'周三',b:3},{a:'周四',b:4},{a:'周五',b:5},{a:'周六',b:6},{a:'周天',b:7}];對吧這種形式才對。說不定可能有很多很多。萬一叫你把一個月都列出來也說不定。
繼續(xù)上代碼
<template>
? ? <div style="height: 1000px">
? ? ? <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
? ? ? <div style="margin: 15px 0;"></div>
? ? ? <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
? ? ? ? <el-checkbox v-for="city in cities" :label="city.b" :key="city.b">{{city.a}}</el-checkbox>
? ? ? </el-checkbox-group>
? ? </div>
</template>
<script>
? const cityOptions = [{a:'周一',b:1}, {a:'周二',b:2}, {a:'周三',b:3},{a:'周四',b:4},{a:'周五',b:5},{a:'周六',b:6},{a:'周天',b:7}];
? export default {
? ? name: "tourSpecialEdition",
? ? components: {},
? ? data(){
? ? ? return{
? ? ? ? checkAll: false,
? ? ? ? checkedCities: [],
? ? ? ? cities: cityOptions,
? ? ? ? isIndeterminate: false
? ? ? }
? ? },
? ? created() {},
? ? mounted() {},
? ? methods: {
? ? ? handleCheckAllChange(val) {
? ? ? ? const arr = val ? cityOptions : [];
? ? ? ? this.checkedCities = [];
? ? ? ? arr.map(item => {
? ? ? ? ? this.checkedCities.push(item.b);
? ? ? ? ? console.log(this.checkedCities.sort())
? ? ? ? });
? ? ? ? this.isIndeterminate = false;
? ? ? },
? ? ? handleCheckedCitiesChange(value) {
? ? ? ? let arrTime = value
? ? ? ? this.checkedCities = arrTime
? ? ? ? console.log(this.checkedCities.sort())
? ? ? ? let checkedCount = value.length;
? ? ? ? this.checkAll = checkedCount === this.cities.length;
? ? ? ? this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
? ? ? }
? ? }
? }
</script>
<style scoped>
</style>總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Vue使用video標簽實現(xiàn)視頻播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue2.0$nextTick監(jiān)聽數(shù)據渲染完成之后的回調函數(shù)方法
今天小編就為大家分享一篇vue2.0$nextTick監(jiān)聽數(shù)據渲染完成之后的回調函數(shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue 重置data的數(shù)據為初始狀態(tài)操作
這篇文章主要介紹了Vue 重置data的數(shù)據為初始狀態(tài)操作方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03
elementUI?checkBox報錯Cannot read property &ap
這篇文章主要為大家介紹了elementUI?checkBox報錯Cannot read property 'length' of undefined的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了Vue.js directive自定義指令詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
Vue?CompositionAPI中watch和watchEffect的區(qū)別詳解
這篇文章主要為大家詳細介紹了Vue?CompositionAPI中watch和watchEffect的區(qū)別，文中的示例代碼簡潔易懂，希望對大家學習Vue有一定的幫助2023-06-06
公司業(yè)務新開了一個商家管理微信H5移動端項目，日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數(shù)據。下面小編給大家?guī)砹嘶趘ue實現(xiàn)一個炫酷的日歷組件，感興趣的朋友參考下吧2018-10-10
本文只針對自己需要本地模擬接口于是搭建一個本地node服務器供自己測試使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
Nuxt3項目搭建過程(Nuxt3+element-plus+scss詳細步驟)
這篇文章主要介紹了Nuxt3項目搭建（Nuxt3+element-plus+scss詳細步驟）,本次記錄一次使用Nuxt3搭建前端項目的過程，內容包含Nuxt3的安裝，基于Vite腳手架（默認）構建的vue3項目，element-plus的安裝配置，scss的安裝，目錄結構的創(chuàng)建和解釋，需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了vue發(fā)送驗證碼計時器防止刷新實現(xiàn)詳解，<BR>有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03