vue判断是否被选中_判断按钮是否可以点击逻辑 vue
判断按钮是否可以点击逻辑总体逻辑: 判断这个按钮是否可以点击。1.定义数组接受所有选中行共同拥有的状态,如果所有选中行共同拥有的状态没有当前状态,换句话说只要有一个没有。该按钮就可以点击this.availableBatchBtn()2.具体进行判断 定义一个数组,循环当前选中行。将每一行的状态进行格式化后加入新数组,返回一个_.intersection()的交集。返回一个共同拥有的状态3.定义.
判断按钮是否可以点击逻辑
总体逻辑: 判断这个按钮是否可以点击。
1.定义数组接受所有选中行共同拥有的状态,如果所有选中行共同拥有的状态没有当前状态,
换句话说只要有一个没有。该按钮就可以点击this.availableBatchBtn()
2.具体进行判断 定义一个数组,循环当前选中行。将每一行的状态进行格式化后加入新数组,
返回一个_.intersection()的交集。返回一个共同拥有的状态
3.定义格式化函数。getBtnByStatus,对应的state,为对应的状态(为一个数组)。返回对应的
状态
原理:交集状态不存在即可点击
ex:
icon="iconfont hy-delivery-o"
size="mini"
title="送审"
@click="batchSend">
一------------------------------------
判断送审按钮是否可以点击----isShowBatchSend函数
arr 为一个数组,这个数组中的内容是当前所有选中行都包含的状态
根据返回的数组交集部分。也就是arr是返回的所有状态的交际。查询是否包括当前按钮状态
如果这个按钮要变成的状态不包括在当前数组中。就可以点击 返回true
isShowBatchSend() {
let arr = this.availableBatchBtn();
return !arr.includes(STATUS.SEND);
}
二-------------------------------------
--------availableBatchBtn函数返回一个数组
1.定义空数组
2.循环当前选中的行。在循环中为这个加进每一行的状态判断。
3.返回每一行中都包含的值
4.格式化后的每一个state都加入了result这个数组,且每一个state格式化后也为一个数组,
解构数组,最终返回多个状态(数组)相同的交集状态部分。
availableBatchBtn() {
let result = [];
for (const item of this.selection) {
result.push(this.getBtnByStatus(item.status));
}
return _.intersection(...result);
}
三-------------------------------------
getBtnByStatus-----判断传入每一行的status的值,返回对应的内容。返回一个数组
格式化的原因,state的值为1或者2等 虽然1 2不相等,但是1 2对应的状态可能存在相等的,
一个state并不代表一个状态而是很多状态的集合。所以格式化成数组求交集。
getBtnByStatus(status) {
let map = {
"0": [STATUS.START, STATUS.ACHIVE],
"1": [STATUS.SEND, STATUS.PULL, STATUS.STOP, STATUS.ACHIVE],
"2": [],
"3": [STATUS.PULL, STATUS.START, STATUS.ACHIVE]
};
return map[status];
}
注: 提前在script中定义好变量 方便格式化和比较
ex:
const STATUS = {
START: "开启",
ACHIVE: "归档",
STOP: "停用",
SEND: "送审",
PULL: "拉取"
};
一般是几个按钮类型定义几种数据类型,进行判断选中交集是否囊括对应状态。
更多推荐
所有评论(0)