vue判断是否被选中_判断按钮是否可以点击逻辑 vue

判断按钮是否可以点击逻辑

总体逻辑： 判断这个按钮是否可以点击。

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: "拉取"

};

一般是几个按钮类型定义几种数据类型，进行判断选中交集是否囊括对应状态。