Vue.js 2+Vuetify：基于位运算的复选框选中值获取与权限更新

1. 计算合并后的权限整数 #

因为你的权限值都是2的幂（2、4、8...对应二进制的单独位），可以通过位或运算快速合并选中的权限值，得到最终的权限整数：

实现代码 #

// 选中所有已勾选的权限复选框
const checkedPrivileges = document.querySelectorAll('input[type="checkbox"]:checked');
let mergedPrivilege = 0;

checkedPrivileges.forEach(box => {
  // 从复选框的value/dataset中取出对应的权限值（比如2、4、8）
  const privValue = parseInt(box.value, 10);
  // 位或运算：将对应权限位设为1，自动去重（同一个权限多次选中也不会重复计算）
  mergedPrivilege |= privValue;
});

// 更新到你的权限变量
this.privileges = mergedPrivilege;
// 示例：选中2、4、8时，mergedPrivilege = 2 | 4 | 8 = 14

2. 获取选中的权限值数组 #

如果需要直接收集选中的权限值数组，可以通过数组映射实现：

实现代码 #

const checkedPrivileges = document.querySelectorAll('input[type="checkbox"]:checked');
// 将选中的复选框转换为数组，提取每个的权限值
const selectedPrivArray = Array.from(checkedPrivileges).map(box => parseInt(box.value, 10));

// 示例：选中2、4、8时，selectedPrivArray = [2, 4, 8]

注意事项 #

• 确保每个复选框的value（或自定义属性如data-privilege）存储的是对应的权限整数（2的幂），不要存字符串或其他格式。
• 位或运算比直接加法更严谨：如果出现同一个权限被多次选中的情况（比如复选框重复渲染），位或只会保留该权限位一次，加法会导致数值错误。

内容的提问来源于stack exchange，提问作者Joe