多级select联动

看如下题目：

给定的configList（初始化一配置的优先级默认数据） 和 selectList（下拉选择框的选项列表）
每次添加一个新的优先级选项，需要过滤掉前面所有已选的内容。

也是为了互斥，满足优先级的需求。（毕竟同一个选项，不可以同时存在多个优先级。）

所以，其实只要把初始化数据处理好，写好对应的方法，后续下拉列表 onChange 时，调用即可。

我的思路是：定义一个对象，把优先级，作为对象的key，过滤完已选值 剩余的 selectList 作为value。

obj = {
    1: selectList,
    2: selectList1,
    3: selectList2
}

类似上面这种，大致比较复杂的应该就是数据处理了。我的代码如下：

interface configProps {
  level: number;
  code: string;
}
interface selectListProps { // 这里替换下字段哈，和昨天的题目有些许差异，但问题不大
  code: string;
  codeCn: string;
}

export const dealConfig = (configList: configProps[], selectList: selectListProps[]) => {
  const selectObj: any = {};
  const selectNameArr: any = []; // 用来保存之前优先级已选的内容，用来过滤selectList
  configList.forEach((config: any) => {
    let level = config.level;
    if (level == 1) selectObj[level] = selectList;
    else selectObj[level] = addlevel(selectNameArr, selectList);
    // 把前面优先级的 选择项保存下来
    selectNameArr.push(config.code);
  });
  return selectObj;
};

// 过滤已选则的filedList
export function addlevel(selectNameArr: any, selectList: selectListProps[]) {
  let newselectList = [...selectList];
  // 过滤已选值，返回新的selectList
  newselectList = newselectList.filter((item: selectListProps, index: number) => {
    return selectNameArr.indexOf(item.code) == -1;
  });
  return newselectList;
}

核心的就这个筛选操作，其他的都比较简单。看下 selectCom 的简单抽离

    const SelectCom = (code: any, level: any) => {
      // fieldListObj 就是上面 dealConfig 方法的返回值
      const selectListArr = selectListObj[level];
      return (
        <Select
          defaultValue={code}
          onChange={(val) => selectListChange(val, level)}
          className="selectComponent"
        >
          {selectListArr?.map((item: any, index: number) => {
            return (
              <Option value={item.code} key={`${item.code}-${index}`}>
                {item.codeCn}
              </Option>
            );
          })}
        </Select>
      );
    };

其余操作就比较简单啦, 其余操作的源码，点击 阅读原文 就可以查看，在github的项目中～

原本思路也不是很清晰，只有大致方向，具体实现，也是在代码编写的过程中，落实了细节。遇到的个别问题，用断点调试的方式，找出问题，快速解决。

今天的技术分享到此结束～，欢迎交流你的思路和解法。