Remember once in the layui shuttle box, use the subtraction union method to preprocess some of the disabled items

The transfer.render method of the Layui shuttle box accepts [all data] object array data and [initial right data] id array value

Now the demand is like this: Use the shuttle box to assign roles to employees, and roles that are not available in the operation account cannot be assigned. The page is as follows

 Object array obtained by ajax request: own role myRoles, and the role of the operated employee hisRoles

Generate the item id array on the right of the shuttle box as the value of the shuttle box

let hisRolesIdList = [];
hisRoles.forEach(his=>hisRolesIdList.push(his.id));

Calculate the role of the operated employee, the role disableRoles that you do not own

let disableRoles = [...hisRoles].filter(his => [...myRoles].every(my=>my.id!==his.id));

Difference set plus minus set is the union set, including all items, as the data of the shuttle box

let unionRoles = [...myRoles,...disableRoles];

Because disableRoles is a copied array, add the disabled attribute in unionRoles

unionRoles.forEach(x=>{if(new Set(disableRoles).has(x))x.disabled=true;});

Everything is ready, just generate the shuttle box next!

transfer.render({
  
  

......

date: unionRoles,

value:hisRolesIdList

})