vue中el-checkbox全選、反選、多選的實現

Posted on by

vue el-checkbox全選、反選、多選

描述：實現對一組數據進行全選，反選、多選操作

  • 全選
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 狀態

舉個例子。比如選擇星期。一周七天

2種方法。思密達。。。。第一種帶局限性。笨辦法，也發出來大傢看看（推薦使用第二種）

這是方式的值是組件自帶的值方式

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想瞭一下。不對。後臺反過來的數組不應該是這種。大部分都應該是obj的形式

於是乎。

const cityOptions = [{a:'周一',b:1}, {a:'周二',b:2}, {a:'周三',b:3},{a:'周四',b:4},{a:'周五',b:5},{a:'周六',b:6},{a:'周天',b:7}];

對吧這種形式才對。說不定可能有很多很多。萬一叫你把一個月都列出來也說不定。

繼續上代碼

<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>

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：