前端vue-Taro框架中使用插件 ---pinyin 将城市树形分类

1.需求

当我做一个获取城市的功能的时候 我发向后端返回的数据 和我想i选要的相差太多

这样的在手机端可以滑动 并且 快捷选中的城市列表

目前的数据是这样的，就是一个城市数组 目前这样的数组 我要想显示我的页面实现功能是不行的

需要是树形结够

所以我前端需要自己将这个城市 首字 的拼音字母 首字母 分类分出来

需要将数据变成这样 才可以实现我的需求

后端返回的数据 不是这样 那就只能暂时前端来处理这个数据了

但是遇到一个问题 ？

怎么将这个数据 分类 字母？

2. pinyin 插件的使用

pinyin 插件 npm 包

npm i pinyin

将这个数组处理

pinyin 中提供了 修改给你提取出第一个文字的第一个字母的大写字母的方法

export const transformDataToNewFormat = (data) => { // 参数是数组
  const newData:any = [];

  // 创建包含 A 到 Z 的字母的数组
  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");

  // 初始化新数据结构
  alphabet.forEach((letter) => {
    newData.push({
      title: letter,
      list: [],
    });
  });

  // 将城市数据分组到对应的字母标题下
  data.forEach((city) => {
    const firstLetter = city.cityName[0].toUpperCase();
    // const pinyinArray = pinyin(firstLetter, {
    //   style: pinyin.STYLE_NORMAL, // 使用普通风格的拼音
    // });

    // const pinyinFirstLetter =
    //   pinyinArray.length > 0 ? pinyinArray[0][0][0].toUpperCase() : firstLetter;
    let pinyinFirstLetter;

    // 使用条件语句，如果城市名是 "重庆"，则将首字母设置为 "C"
    if (city.cityName.indexOf("重庆") !== -1) {
      pinyinFirstLetter = "C";
    } else {
      const pinyinArray = pinyin(firstLetter, {
        style: pinyin.STYLE_NORMAL, // 使用普通风格的拼音
      });
      pinyinFirstLetter =
        pinyinArray.length > 0
          ? pinyinArray[0][0][0].toUpperCase()
          : firstLetter;
    }

    const index = alphabet.indexOf(pinyinFirstLetter);

    if (index !== -1) {
      newData[index].list.push({ id: city.id, name: city.cityName });
    }
  });

  return newData.filter((item) => item.list.length > 0);
};

3.总结

这些处理按说应该是后端直接返回来比较好 毕竟 后端比前端处理好 但是咱前端得会