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

一只小阿乐2024-03-17 10:31

1.需求

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

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

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

需要是树形结够

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

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

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

但是遇到一个问题？

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

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.总结

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