antd+vue3 多選框的值為對象數組

 

需求：

　　1、自定義多選樣式

　　2、多選值為對象數組

　　3、已選項側邊顯示，可刪除，並關聯“備選”的選擇狀態

　　4、此示例為組件，數據為父組件傳遞而來

難點：多選項的值為對象數組，如果直接使用對象值進行匹配，由於對象的指引不同，所以即使完全相同的值，匹配也不相同。也就導致多選項的值匹配失敗，顯示為空。

思路：

　　1、備選：多選框的顯示使用對象數組，值使用id數組匹配

　　2、已選：選擇“備選”生成的值為id數組，“已選”根據此id數組匹配“備選”里的所有對象數組生成一個對象數組用以展示

　　3、已選：當點擊刪除時，用對象數組里的id匹配id數組，進行刪除，從而改變右側“備選里的值”

 

 

效果圖如下：

 

 

 

主要代碼如下：

<div class="transfer-card-box">
    備選：
  <div class="transfer-card-body">
     <div>
         <slot name="search"></slot>
     </div>
     <div style="height: 86%">
　　　　　　　　此處控制全選，checkAll為是否全選的值，indeterminate控制全選的樣式
          <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate"
                      @change="onCheckAllChange">全選</a-checkbox>
          <div class="selector-item-box">
　　　　　　　　　checkedDataId2為選中的值，此處只記錄id
            <a-checkbox-group v-model:value="checkedDataId2" >
　　　　　　　　　　optionAll為所有備選的數據，是個對象數組。利用循環柵格實現自定義布局
              <div v-for="item in optionAll" :key="item.id">
                <a-row :gutter="[0,16]">
                  <a-col :span="24">
　　　　　　　　　　　　　　為每一個多選項賦值，值為id
                    <a-checkbox :value="item.id">
                      {{item.name}}
                    </a-checkbox>
                  </a-col>
                </a-row>
              </div>
            </a-checkbox-group>
          </div>
        </div>
     </div>
 </div>

 <div class="transfer-card-box">
      已選：
      <div class="transfer-card-body">
        <div class="item-flex-between" style="padding-bottom: 4px"
             v-for="item in checkedData2" :key="item.id">
          <div>{{item.name}}</div>
          <div class="remove-icon" @click="removeItem(item.id)"><CloseCircleOutlined /></div>
        </div>
      </div>
    </div>
</div>

import { reactive, toRefs, watch } from 'vue'

export default {
　　　父組件傳來的數據  4   props: {
    optionAll: { type: Array, default() { return [] } },//所有備選項（對象數組）  6     checkedDataId: { type: Array, default() { return [] } },//已選項（id數組）  7   },
  setup(props) {
    const state = reactive({
      indeterminate: true,
      checkAll: false,
      checkedData2: [],//已選項（對象數組）頁面展示使用 13       checkedDataId2: [],//已選項（id數組）后續改變值要用，所以不能直接使用props.checkedDataId 14     })
       監聽props 15     watch(
      props,
      newProps => {
　　　　　　　將已選項id數組轉為字符串，方便后續匹配數據 18         const valStr = newProps.checkedDataId.join()
　　　　　　　初始化數組，避免重復push數據 19         state.checkedData2 = []
        state.checkedDataId2 = []
　　　　　　　循環所有備選項。由於已選項數組里只有id，所有此處將id進行匹配，將匹配的值push進checkData2，也就是頁面顯示的已選項的值。 21         newProps.optionAll.forEach((item) => {
          if (valStr.indexOf(item.id) > -1) {
            state.checkedData2.push(item)
          }
        })
　　　　　　　為checkedDataId2賦值，為后續刪除操作做准備 26         state.checkedDataId2 = newProps.checkedDataId
      },
　　　　　　immediate必須加，表示立即執行，否則監聽無效 28       { deep: true, immediate: true },
    )

　　　　監聽checkedDataId2，當此字段值改變時，對應的改變checkData2的值，也就是頁面頁面‘已選’的展示數據 30     watch(
      () => state.checkedDataId2,
      val => {
        state.indeterminate = !!val.length && val.length < props.optionAll.length
        state.checkAll = val.length === props.optionAll.length
        const valStr = val.join()
        state.checkedData2 = []
        props.optionAll.forEach((item) => {
          if (valStr.indexOf(item.id) > -1) {
            state.checkedData2.push(item)
          }
        })
      },
      { deep: true, immediate: true },
    )

　　　　用戶點擊全選按鈕
    const onCheckAllChange = (e) => {
      /* 實現數組淺拷貝，否則刪除已選項也會刪除備選項optionAll */
      const newArr = props.optionAll.concat()
      Object.assign(state, {
        checkedData2: e.target.checked ? newArr : [],
        indeterminate: false,
      })

      state.checkedDataId2 = []
      if (e.target.checked) {
　　　　　　 全選 56         props.optionAll.forEach(item => {
          state.checkedDataId2.push(item.id)
        })
      } else {
        state.checkedDataId2 = []
      }
    }

　　　　刪除已選項
    const removeItem = val => {
　　　　　匹配刪除id的位置，將其從checkedDataId2中移除，由於有監聽checkedDataId2，所以后續操作都在監聽中完成 65       const index = state.checkedDataId2.indexOf(val)
      state.checkedDataId2.splice(index, 1)
    }

    return {
      ...toRefs(state),
      onCheckAllChange,
      removeItem,
    }
  },
}