antd vue 多选框的全选功能实现和选中时候传入值的改变

需求

• ant design vue 多选框的全选功能实现和选中时候传入值的改变,官网的实例不太好,没有仔细说明怎么更改传入的值,因为很多情况下都是显示的是中文,传入的是数字,也就是id

做法

• 添加下面
  • 多选按钮和选项项

<a-checkbox v-model:checked="checkInfoData.checkAllInfo" :indeterminate="checkInfoData.indeterminate"     @change="onCheckAllChange">
<span>选择所有</span>
</a-checkbox>

 <a-checkbox-group  v-model:value="checkInfoData.userSelectList" :options="checkInfoData.checkInfoDataList"></a-checkbox-group>

• 数据项目

const checkInfoData = ref({
  indeterminate:false, //当选择项有一部分还没有选择的时候,就会显示这个,否者就是完整的勾勾了
  checkAllInfo:true,//全选  要默认全选
    //多选按钮的项目,必须要设置为这种格式的,label对应展示项,value对应存储的值
  checkInfoDataList:[
    {
      label:'选项A',
      value:1,
    },
    {
      label:'选项B',
      value:2,
    },
    {
      label:'选项C',
      value:3,
    },
    {
      label:'选项D',
      value:4,
    },
    {
      label:'选项E',
      value:5,
    },

  ],//可选的多选项
  userSelectList:[],//用户选中的项
});

• 回调

/* 全选单选框点击回调 */
const onCheckAllChange = (e) => {
    //e.target.checked 获取全选按钮的选中状态
  if(e.target.checked){
      //当为全选的时候
      //将多选按钮的项目的value值赋值为用户选择,也就是变为这种形式 [1,2,3,4,5]
    checkInfoData.value.userSelectList = checkInfoData.value.checkInfoDataList.map(item => item.value);
  }else{
      //当为全不选的时候
      //清空选择的列表
    checkInfoData.value.userSelectList = []
  }
  //明确全选了,所以设置不明确全选的状态为false,也就是展示完整的勾勾
  checkInfoData.value.indeterminate = false;
}

/* 监听导出列表选中情况 */
watch(()=>checkInfoData.value.userSelectList,(val)=>{
    //val 等同于 checkInfoData.value.userSelectList
    	//判断是展示不确定的选择状态还是展示完整的勾勾
  checkInfoData.value.indeterminate = !!val.length && val.length < exportSyncData.value.checkInfoDataList.length;
    	
    //判断全选的状态 当用户选择的长度会等于多选项列表的长度的时候即为全选
  checkInfoData.value.checkAllInfo = val.length === checkInfoData.value.checkInfoDataList.length;
})

原理

• 原理就是监听全选按钮的选中状态,设置相应的回调就可以

• indeterminate是什么?

  • indeterminate = true的时候

  

  • indeterminate = false的时候