记录ant-design cascader多选传参问题

一、 逻辑背景

说明： 级联选择器多选传参，项目当中遇到了两种情况

1.学段（例如普通高中）是一个数组，年级（高一）是一个数组，班级（3班）是一个数组，在请求列表时把这三个数组分别传过去

传参格式： gradeIdList: [ 15, 52, 73, 39 ], sectionCodeList: [ 16, 88 ], classIdList: [ 43, 22 ] }

处理方式：

// template 内容
 <a-cascader
          v-model:value="searchData.cascaderValues"
          style="width: 200px"
          :options="cascaderOptions"
          placeholder="学段/年级/班级"
          change-on-select
          multiple
          match-input-width="true"
          max-tag-count="responsive"
          :get-popup-container="
            triggerNode => {
              return triggerNode.parentNode;
            }
          "
          :field-names="{ label: 'name', value: 'id', children: 'list' }"
          :display-render="({ labels }) => labels.join(' / ')"
          @change="cascaderChange"
        />

// 学段年级班级change事件
function cascaderChange(value, selectedOptions) {
  console.log(value, selectedOptions);
  if (value.length > 0) {
    let sectionCodeArr = [];
    let gradeIdArr = [];
    let classIdArr = [];
    value.forEach(el => {
      sectionCodeArr.push(el[0]);
      if (el.length > 1) {
        gradeIdArr.push(el[1]);
      }
      if (el.length > 2) {
        classIdArr.push(el[2]);
      }
    });
    searchData.sectionCodes = [...new Set(sectionCodeArr)];
    searchData.gradeIds = [...new Set(gradeIdArr)];
    searchData.classIds = [...new Set(classIdArr)];
  } else {
    searchData.sectionCodes = [];
    searchData.gradeIds = [];
    searchData.classIds = [];
    searchData.cascaderValues = null;
  }
  querySloganListFn(); // 请求列表
  // eslint-disable-next-line eqeqeq
  if (value == undefined) {
    querySloganListFn(); // 如果都没选择就不传值
  }
}

2. 学段年级都不传，只传班级id（因为ant官网没有，所以要自己判断)，例如选中普通高中下的高一所有班级，便高一所有班级下的班级id都传过去

传参格式：classIdList: [1,2,3]

处理方式：

// 获取班级id
function getClassId(obj, list) {
  if (obj.classId) {
    list.push(obj.classId);
  }
  if (obj.list) {
    obj.list.forEach(item => {
      getClassId(item, list);
    });
  }
}

// 学段年级班级change事件
function cascaderChange(value, selectedOptions) {
  console.log(value, selectedOptions);
  checkedClassIdList = [];
  if (selectedOptions.length > 0) {
    selectedOptions.forEach(arr => {
      const leafObj = arr[arr.length - 1];
      getClassId(leafObj, checkedClassIdList);
    });
    console.log('dddd', checkedClassIdList);
  }
  if (value.length == 0){
    searchData.sectionCodes = [];
    searchData.gradeIds = [];
    searchData.classIds = [];
    searchData.cascaderValues = null;
    checkedClassIdList = [];
  }
  querySloganListFn(); // 请求列表
  // eslint-disable-next-line eqeqeq
  if (value == undefined) {
    querySloganListFn(); // 如果都没选择就不传值
  }
}