vue点击选中取消切换
猩猩点点 人气:0vue点击选中取消切换
html
<el-button @click="searchStatisticsInfo(item)" :class="item.isChoose == true ? 'active' : ''" size="small" v-for="(item,index) in menulist" :key="index">{{item.name}}</el-button>
data
menulist: [{ id: 1, isChoose: true, name: '今天' }, { id: 2, isChoose: false, name: '近七天' }, { id: 3, isChoose: false, name: '近30天' }, { id: 4, isChoose: false, name: '近90天' }],
JS
methods: { searchStatisticsInfo (item) { for (let item of this.menulist) { item.isChoose = false; } item.isChoose = !item.isChoose; } }
如果数组中不包含isChoose 则需要改成$set的方式。
searchStatisticsInfo (item) { for (let row of this.menulist) { this.$set(row, "isChoose", false); } this.$set(item, "isChoose", true); },
vue点击选中,再次点击取消
举个栗子
在el-calendar中单击选中,再次点击取消选中
可以定义一个变量,用他的值作为判断,如果与点击日期相等,就是取消选中
// 点击查询当天记录 handleHoliday(date, data) { const { day } = data; if (this.clickTime === day) { //定义变量clickTime this.findWorkList(this.currentDate); this.findList(this.currentDate); this.clickTime = ""; //再次赋值为空,才能连续点击 return; } else { this.clickTime = day; //不可用date做比较,date是变化的值 this.findWorkList(this.currentDate, day); this.findList(this.currentDate, day) } } },
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容