前端查询 多选及全选 vue

标签

 

      <div class="screen-label">起始年份</div>
      <div
        class="screen-title"
        :class="{ 'screen-choose': item.ischoose }"
        @click="yearChoose(index)"
        v-for="(item, index) in yearlist"
      >
        <span>{{ item.name }}</span>
        <span :class="{ 'screen-choose-active': item.ischoose }"></span>
      </div>

JS

  data() {
    return {
      yearlist: [
        { name: "全部", ischoose: true },
        { name: "2022", ischoose: false },
        { name: "2021", ischoose: false },
        { name: "2020", ischoose: false },
      ],
    };
  },

    yearChoose(n) {
      if (n !== 0) {
        if (this.yearlist[n].ischoose) {
          this.yearlist[n].ischoose = false;
        } else {
          this.yearlist[0].ischoose = false;
          this.yearlist[n].ischoose = true;
        }
        let bol = this.yearlist.every((item) => {
          return item.ischoose == false;
        });
        if (bol == true) {
          this.yearlist[0].ischoose = true;
        }
      } else {
        if (this.yearlist[n].ischoose) {
        } else {
          for (var i in this.yearlist) {
            this.yearlist[i].ischoose = false;
          }
          this.yearlist[n].ischoose = true;
        }
      }
    },


   beginData() {
      var years = [];
      for (var i = 0; i < this.yearlist.length; i++) {
        if (this.yearlist[i].ischoose) {
          years.push(this.yearlist[i].name);
        }
      }

console.log(this.yearlist[0].ischoose  ? ""   : years);

}

css

.screen-choose {
	color: #4068D4;
	border: 1px solid #4068D4;
	border-radius: 4px;
}

.screen-choose-active {
	position: absolute;
	right: -1px;
	bottom: 0px;
	width: 10px;
	height: 10px;
	background: url(../../assets/image.png) -657px -161px;
}