Javascript

antd+vue3 多选框的值为对象数组

本文主要是介绍antd+vue3 多选框的值为对象数组,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

 

需求:

  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 }

 

这篇关于antd+vue3 多选框的值为对象数组的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!