需求：
1、自定义多选样式
2、多选值为对象数组
3、已选项侧边显示，可删除，并关联“备选”的选择状态
4、此示例为组件，数据为父组件传递而来
难点：多选项的值为对象数组，如果直接使用对象值进行匹配，由于对象的指引不同，所以即使完全相同的值，匹配也不相同。也就导致多选项的值匹配失败，显示为空。
思路：
1、备选：多选框的显示使用对象数组，值使用id数组匹配
2、已选：选择“备选”生成的值为id数组，“已选”根据此id数组匹配“备选”里的所有对象数组生成一个对象数组用以展示
3、已选：当点击删除时，用对象数组里的id匹配id数组，进行删除，从而改变右侧“备选里的值”
效果图如下：
主要代码如下：
1 <div class="transfer-card-box"> 2 备选： 3 <div class="transfer-card-body"> 4 <div> 5 <slot name="search"></slot> 6 </div> 7 <div style="height: 86%">
此处控制全选，checkAll为是否全选的值，indeterminate控制全选的样式 8 <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" 9 @change="onCheckAllChange">全选</a-checkbox> 10 <div class="selector-item-box">
checkedDataId2为选中的值，此处只记录id 11 <a-checkbox-group v-model:value="checkedDataId2" >
optionAll为所有备选的数据，是个对象数组。利用循环栅格实现自定义布局 12 <div v-for="item in optionAll" :key="item.id"> 13 <a-row :gutter="[0,16]"> 14 <a-col :span="24">
为每一个多选项赋值，值为id 15 <a-checkbox :value="item.id"> 16 {{item.name}} 17 </a-checkbox> 18 </a-col> 19 </a-row> 20 </div> 21 </a-checkbox-group> 22 </div> 23 </div> 24 </div> 25 </div> 26 27 <div class="transfer-card-box"> 28 已选： 29 <div class="transfer-card-body"> 30 <div class="item-flex-between" style="padding-bottom: 4px" 31 v-for="item in checkedData2" :key="item.id"> 32 <div>{{item.name}}</div> 33 <div class="remove-icon" @click="removeItem(item.id)"><CloseCircleOutlined /></div> 34 </div> 35 </div> 36 </div> 37 </div>
1 import { reactive, toRefs, watch } from 'vue'
2
3 export default {
父组件传来的数据
4 props: {
5 optionAll: { type: Array, default() { return [] } },//所有备选项（对象数组）
6 checkedDataId: { type: Array, default() { return [] } },//已选项（id数组）
7 },
8 setup(props) {
9 const state = reactive({
10 indeterminate: true,
11 checkAll: false,
12 checkedData2: [],//已选项（对象数组）页面展示使用
13 checkedDataId2: [],//已选项（id数组）后续改变值要用，所以不能直接使用props.checkedDataId
14 })
监听props
15 watch(
16 props,
17 newProps => {
将已选项id数组转为字符串，方便后续匹配数据
18 const valStr = newProps.checkedDataId.join()
初始化数组，避免重复push数据
19 state.checkedData2 = []
20 state.checkedDataId2 = []
循环所有备选项。由于已选项数组里只有id，所有此处将id进行匹配，将匹配的值push进checkData2，也就是页面显示的已选项的值。
21 newProps.optionAll.forEach((item) => {
22 if (valStr.indexOf(item.id) > -1) {
23 state.checkedData2.push(item)
24 }
25 })
为checkedDataId2赋值，为后续删除操作做准备
26 state.checkedDataId2 = newProps.checkedDataId
27 },
immediate必须加，表示立即执行，否则监听无效
28 { deep: true, immediate: true },
29 )
监听checkedDataId2，当此字段值改变时，对应的改变checkData2的值，也就是页面页面‘已选’的展示数据
30 watch(
31 () => state.checkedDataId2,
32 val => {
33 state.indeterminate = !!val.length && val.length < props.optionAll.length
34 state.checkAll = val.length === props.optionAll.length
35 const valStr = val.join()
36 state.checkedData2 = []
37 props.optionAll.forEach((item) => {
38 if (valStr.indexOf(item.id) > -1) {
39 state.checkedData2.push(item)
40 }
41 })
42 },
43 { deep: true, immediate: true },
44 )
45
用户点击全选按钮
46 const onCheckAllChange = (e) => {
47 /* 实现数组浅拷贝，否则删除已选项也会删除备选项optionAll */
48 const newArr = props.optionAll.concat()
49 Object.assign(state, {
50 checkedData2: e.target.checked ? newArr : [],
51 indeterminate: false,
52 })
53
54 state.checkedDataId2 = []
55 if (e.target.checked) {
全选
56 props.optionAll.forEach(item => {
57 state.checkedDataId2.push(item.id)
58 })
59 } else {
60 state.checkedDataId2 = []
61 }
62 }
63
删除已选项
64 const removeItem = val => {
匹配删除id的位置，将其从checkedDataId2中移除，由于有监听checkedDataId2，所以后续操作都在监听中完成
65 const index = state.checkedDataId2.indexOf(val)
66 state.checkedDataId2.splice(index, 1)
67 }
68
69 return {
70 ...toRefs(state),
71 onCheckAllChange,
72 removeItem,
73 }
74 },
75 }