关于vue3中文转拼音和三级联动

1.vue3中文转拼音

npm install pinyin --save

  // 拼音
  const namePinyin = ref('');

 mName是后端传过来的 最后的结果是测试杨 ceshiyang

let mName = record.userId_dictText.split(''); 
namePinyin.value = `${mName.join(' ')}（${pinyin.getFullChars(mName.join(' '))}）`;

2.三级联动：

1.第一个下拉框的样式

 
        {{ item.name }}
  

2.获得考试批次的数据

  let batchIdList = ref([]);
  const getexamBitchListFc = async () => {
    const res: any = await getExamBatchList();
    //  console.log('getexamBitchListFc',res)
    batchIdList.value = res.records;
    //  bitchData.value=res.records;
    console.log('batchIdList.value', batchIdList.value);
  };

3.当你选中的时候，就要触发下一个下拉框里面的内容 所以用 @change="handleChange"

这边 toData(value); 里面的value就是上面双向绑定的id将id传过去

  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    toData(value);
    model.value.examId = '';
    model.value.city = '';
  };

4.拿到考试名称列表 

  const toData = (id) => {
    console.log('同一批次考试id', id);
    const params = {
      batchId: id,
    };
    getexamFc(params);
  };

 重点是这个写法 我之前重来不知道可以在es6语法里面再来一层es6语法 这里其实就已经拿到了第二个下拉框的数据，同时将第三个考试城市地址数据整理清楚。

  // 获取这个批次的考试列表
  const getexamFc = async (params?: any) => {
    const res: any = await getexamList(params);
    //  console.log('getexamFc',res);
    examIdList.value = res.records.map((item) => {
      const cityList = item.city.split(',');
      const cityTextList = item.city_dictText.split(',');
      return {
        ...item,
        cityObjList: cityList.map((v, i) => {
          return {
            city: v,
            cityText: cityTextList[i],
          };
        }),
      };
    });
    console.log('examIdList.value', examIdList.value);
  };

5.第二个和第三个下拉框

 
          
            {{
              item.name
            }}
          
        
        
          
            {{ item.cityText }}
          
        

全部代码如下：