最近遇到的問題是需要將拿到的數(shù)據(jù)格式轉換成 vant Picker 想要的數(shù)據(jù)格式屁魏。

Vant

微信截圖_20200624161012.png

• 下拉選擇（聯(lián)動）數(shù)據(jù)格式：

<van-picker show-toolbar title="標題" :columns="columns" />
export default {
  data() {
    return {
      columns: [{
          text: '浙江',
          children: [{
              text: '杭州',
              children: [{ text: '西湖區(qū)' }, { text: '余杭區(qū)' }],
            },{
              text: '溫州',
              children: [{ text: '鹿城區(qū)' }, { text: '甌海區(qū)' }],
            }],
        },{
          text: '福建',
          children: [{
              text: '福州',
              children: [{ text: '鼓樓區(qū)' }, { text: '臺江區(qū)' }],
            },{
              text: '廈門',
              children: [{ text: '思明區(qū)' }, { text: '海滄區(qū)' }],
            }],
        }],
    };
  },
};

• 下拉選擇（不聯(lián)動）數(shù)據(jù)格式：

<van-picker show-toolbar title="標題" :columns="columns" />
export default {
  data() {
    return {
      columns: [
        // 第一列
        {
          values: ['周一', '周二', '周三', '周四', '周五'],
          defaultIndex: 2,
        },
        // 第二列
        {
          values: ['上午', '下午', '晚上'],
          defaultIndex: 1,
        },
      ],
    };
  },
};

• 下面是后端返回的數(shù)據(jù)蒋纬。如何根據(jù)后端返回的數(shù)據(jù)轉換成 vant picker 想要的數(shù)據(jù)格式呢？

"linkage": "安徽\t安慶市\(zhòng)t安慶宜馬\n安徽\t蚌埠市\(zhòng)t蚌埠市臣功\n安徽\t阜陽市\(zhòng)t阜陽賽達\n安徽\t合肥市\(zhòng)t合肥市賀悅\n安徽\t合肥市\(zhòng)t安徽亞達\n安徽\t合肥市\(zhòng)t安徽偉新行\(zhòng)n安徽\t六安市\(zhòng)t六安市泰源\n安徽\t蕪湖市\(zhòng)t蕪湖華達\n安徽\t宿州\t宿州藍航\n北京\t北京市\(zhòng)t北京博瑞翔達\n北京\t北京市\(zhòng)t北京首汽騰達\n北京\t北京市\(zhòng)t北京華日通\n北京\t北京市\(zhòng)t北京東仁隆達\n北京\t北京市\(zhòng)t北京車豪\n北京\t北京市\(zhòng)t北京宏源亞興\n北京\t北京市\(zhòng)t北京天一恒遠服務有限責任公司\n北京\t北京市\(zhòng)t北京瑞豪成商貿\n重慶\t重慶市\(zhòng)t重慶萬事興\n重慶\t重慶市\(zhòng)t重慶銀迅\n福建\t福州市\(zhòng)t福建太元\n福建\t晉江市\(zhòng)t晉江成達\n福建\t泉州市\(zhòng)t泉州鑫達\n福建\t三明市\(zhòng)t三明鷺翔\n福建\t廈門市\(zhòng)t廈門吉順豐\n甘肅\t蘭州市\(zhòng)t蘭州金島驕馬\n廣東\t東莞市\(zhòng)t東莞市久馳\n廣東\t東莞市\(zhòng)t東莞市新天地\n廣東\t東莞市\(zhòng)t東莞市欣達\n廣東\t東莞市\(zhòng)t東莞市通華\n廣東\t佛山市\(zhòng)t佛山市合自達\n廣東\t佛山市\(zhòng)t佛山市順德區(qū)萬事得\n廣東\t佛山市\(zhòng)t佛山市中衡駿達\n廣東\t佛山市\(zhòng)t佛山市廣物馭達\n廣東\t廣州市\(zhòng)t廣州博程\n廣東\t廣州市\(zhòng)t廣州成遠\n廣東\t廣州市\(zhòng)t廣東物通馭達\n廣東\t廣州市\(zhòng)t廣州睿翼\n廣東\t惠州市\(zhòng)t惠州市大華\n廣東\t江門市\(zhòng)t江門博騰\n廣東\t清遠市\(zhòng)t清遠市中衡駿達\n廣東\t汕頭市\(zhòng)t汕頭市通利華月浦服務\n廣東\t深圳市\(zhòng)t深圳市眾深聯(lián)\n廣東\t深圳市\(zhòng)t深圳市安進機電設備\n廣東\t深圳市\(zhòng)t深圳通利華龍崗\n廣東\t深圳市\(zhòng)t深圳市通利華\n廣東\t深圳市\(zhòng)t深圳市通利華前海\n廣東\t湛江市\(zhòng)t湛江合達\n廣東\t中山市\(zhòng)t中山市中達\n廣東\t珠海市\(zhòng)t珠海市鉅榮\n廣西\t百色市\(zhòng)t百色方泰\n廣西\t桂林市\(zhòng)t桂林鑫廣達博達\n廣西\t柳州市\(zhòng)t柳州鑫廣達\n廣西\t南寧市\(zhòng)t廣西鑫廣達\n廣西\t南寧市\(zhòng)t廣西馬之悅\n貴州\t貴陽市\(zhòng)t貴州興新田源燁\n貴州\t貴陽市\(zhòng)t貴州四揚日達\n貴州\t遵義市\(zhòng)t遵義錦馳\n海南\t貉刂眩口市\(zhòng)t海南優(yōu)之杰\n海南\t三亞市\(zhòng)t三亞優(yōu)之杰服務\n河北\t保定市\(zhòng)t保定市威達\n河北\t邯鄲市\(zhòng)t邯鄲龐大赫峰\n河北\t廊坊市\(zhòng)t廊坊龐大赫峰\n河北\t秦皇島市\(zhòng)t秦皇島龐大赫峰\n河北\t石家莊市\(zhòng)t石家莊龐大赫峰\n河北\t石家莊市\(zhòng)t石家莊市冀東\n河北\t唐山市\(zhòng)t唐山冀東赫峰\n河北\t邢臺市\(zhòng)t邢臺龐大赫峰\n河北\t邢臺市\(zhòng)t邢臺弘美\n河北\t張家口市\(zhòng)t張家口龐大赫峰\n河南\t焦作市\(zhòng)t焦作雙達\n河南\t開封市\(zhòng)t開封市容基\n河南\t洛陽市\(zhòng)t洛陽馳釗\n河南\t南陽市\(zhòng)t南陽興業(yè)\n河南\t新鄉(xiāng)市\(zhòng)t新鄉(xiāng)市弘森\n河南\t信陽市\(zhòng)t信陽鑫聯(lián)\n河南\t許昌市\(zhòng)t許昌正通馬六\n河南\t鄭州市\(zhòng)t河南冠豪\n河南\t鄭州市\(zhòng)t河南裕華紫光\n黑龍江\t大慶市\(zhòng)t大慶廣利達\n黑龍江\t哈爾濱市\(zhòng)t哈爾濱森華\n黑龍江\t哈爾濱市\(zhòng)t哈爾濱乾豐服務有限責任公司\n湖北\t武漢市\(zhòng)t武漢利達有限責任公司\n湖北\t武漢市\(zhòng)t武漢龍?zhí)‐n湖北\t武漢市\(zhòng)t湖北捷運宜達\n湖北\t襄陽市\(zhòng)t襄陽君和盛世\n湖北\t宜昌市\(zhòng)t宜昌恒信天龍\n湖南\t常德市\(zhòng)t常德時代陽光\n湖南\t郴州市\(zhòng)t郴州興華誠\n湖南\t岳陽市\(zhòng)t岳陽華通\n湖南\t長沙市\(zhòng)t長沙德順\n湖南\t長沙市\(zhòng)t湖南萬乘\n湖南\t長沙市\(zhòng)t長沙博程駿粵\n湖南\t株洲市\(zhòng)t株洲市華興\n吉林\t吉林市\(zhòng)t吉林市神華服務\n吉林\t四平市\(zhòng)t四平建達\n吉林\t松原市\(zhòng)t松原市征途路達\n吉林\t通化市\(zhòng)t通化冠喆\n吉林\t長春市\(zhòng)t吉林省華達\n吉林\t長春市\(zhòng)t吉林省仁德\n吉林\t長春市\(zhòng)t吉林省國興服務\n吉林\t長春市\(zhòng)t長春久鼎\n江蘇\t常熟市\(zhòng)t常熟市華通\n江蘇\t常州市\(zhòng)t常州神馬\n江蘇\t常州市\(zhòng)t常州外汽金程\n江蘇\t淮安市\(zhòng)t淮安市宏宇翔舜\n江蘇\t江陰市\(zhòng)t江陰市盛達佳穎\n江蘇\t昆山市\(zhòng)t昆山千江一馬\n江蘇\t連云港市\(zhòng)t連云港上達\n江蘇\t南京市\(zhòng)t江蘇乾豐\n江蘇\t南京市\(zhòng)t南京通孚源\n江蘇\t南通市\(zhòng)t南通銀達\n江蘇\t南通市\(zhòng)t南通弘業(yè)\n江蘇\t如皋市\(zhòng)t如皋市金澤\n江蘇\t蘇州市\(zhòng)t蘇州蘇天\n江蘇\t蘇州市\(zhòng)t蘇州國亞達服務\n江蘇\t蘇州市\(zhòng)t蘇州浚和\n江蘇\t太倉市\(zhòng)t太倉博泰\n江蘇\t泰州市\(zhòng)t泰州明雅\n江蘇\t無錫市\(zhòng)t無錫聯(lián)眾\n江蘇\t無錫市\(zhòng)t無錫市眾達\n江蘇\t無錫市\(zhòng)t無錫榮事達貿易服務\n江蘇\t吳江市\(zhòng)t吳江市東順\n江蘇\t徐州市\(zhòng)t江蘇遠方工貿實業(yè)有限責任公司\n江蘇\t鹽城市\(zhòng)t森風集團鹽城義德\n江蘇\t揚州市\(zhòng)t揚州華美達\n江蘇\t宜興市\(zhòng)t宜興市榮誠\n江蘇\t張家港市\(zhòng)t張家港通城\n江蘇\t鎮(zhèn)江市\(zhòng)t鎮(zhèn)江維力達\n江西\t贛州市\(zhòng)t贛州金馬\n江西\t南昌市\(zhòng)t江西戎馬發(fā)展\n江西\t南昌市\(zhòng)t江西省亞泰\n江西\t上饒市\(zhòng)t上饒戎馬\n江西\t宜春市\(zhòng)t宜春華達\n遼寧\t鞍山市\(zhòng)t鞍山北方\n遼寧\t大連市\(zhòng)t大連百利加\n遼寧\t錦州市\(zhòng)t錦州新東方\n遼寧\t遼陽市\(zhòng)t遼陽合興\n遼寧\t盤錦市\(zhòng)t盤錦富田富達\n遼寧\t沈陽市\(zhòng)t沈陽中聯(lián)服務\n遼寧\t沈陽市\(zhòng)t遼寧福達\n遼寧\t沈陽市\(zhòng)t沈陽鑫盛達\n內蒙古\t赤峰\t赤峰澤泰\n內蒙古\t呼和浩特\t內蒙古燕達\n寧夏\t銀川市\(zhòng)t寧夏自立升\n青海\t西寧市\(zhòng)t青海泰洲弘車輛\n山東\t德州市\(zhòng)t德州通達\n山東\t濟南市\(zhòng)t濟南明盛\n山東\t濟南市\(zhòng)t山東新駿\n山東\t濟寧市\(zhòng)t濟寧福樂途\n山東\t聊城市\(zhòng)t聊城金源\n山東\t臨沂市\(zhòng)t臨沂駿騏\n山東\t青島市\(zhòng)t青島中聯(lián)信管理\n山東\t青島市\(zhòng)t青島恒昌\n山東\t青州市\(zhòng)t青州長興\n山東\t日照市\(zhòng)t日照市佰世達\n山東\t濰坊市\(zhòng)t濰坊天虹\n山東\t煙臺市\(zhòng)t煙臺大成金馬\n山東\t淄博市\(zhòng)t山東鴻達發(fā)展\n山東\t威海市\(zhòng)t威海馳航豪馬\n山西\t大同市\(zhòng)t山西中盛瑞達貿易\n山西\t晉城市\(zhòng)t晉城市長淮\n山西\t太原市\(zhòng)t山西匯眾匯達\n山西\t長治市\(zhòng)t長治市匯眾匯達\n陜西\t西安市\(zhòng)t陜西唐興\n陜西\t西安市\(zhòng)t陜西欣達\n陜西\t西安市\(zhòng)t陜西潤達\n上海\t上海市\(zhòng)t上海綠地東\n上海\t上海市\(zhòng)t上海路帥\n上海\t上海市\(zhòng)t上海通銳\n上海\t上海市\(zhòng)t上海交運隆嘉\n上海\t上海市\(zhòng)t上海綠地楊浦\n上海\t上海市\(zhòng)t上海景和金沙\n四川\t成都市\(zhòng)t四川中鵬\n四川\t成都市\(zhòng)t成都東成\n四川\t成都市\(zhòng)t成都明友西物\n四川\t成都市\(zhòng)t四川城市車輛維修服務\n四川\t達州市\(zhòng)t達州市天一航旗銘峻\n四川\t德陽市\(zhòng)t德陽永信\n四川\t樂山市\(zhòng)t樂山天牛億馬\n四川\t綿陽市\(zhòng)t綿陽嘉成\n四川\t宜賓市\(zhòng)t宜賓一馬\n天津\t天津市\(zhòng)t天津市駿達\n天津\t天津市\(zhòng)t天津市中乒北駿\n天津\t天津市\(zhòng)t天津駿雅\n天津\t天津市\(zhòng)t天津駿仁達\n新疆\t烏魯木齊市\(zhòng)t新疆華達服務有限責任公司\n云南\t昆明市\(zhòng)t云南善為\n云南\t昆明市\(zhòng)t云南正馬\n浙江\t蒼南縣\t蒼南縣榮睿\n浙江\t慈溪市\(zhòng)t慈溪市新亞\n浙江\t海寧市\(zhòng)t海寧市禾通\n浙江\t杭州市\(zhòng)t杭州富陽萬達\n浙江\t杭州市\(zhòng)t浙江康橋宏馬\n浙江\t杭州市\(zhòng)t浙江元通瑞達\n浙江\t杭州市\(zhòng)t浙江孚達\n浙江\t杭州市\(zhòng)t杭州駿馬\n浙江\t杭州市\(zhòng)t杭州睿馬\n浙江\t杭州市\(zhòng)t杭州愛馬\n浙江\t杭州市\(zhòng)t杭州森悅一達\n浙江\t湖州市\(zhòng)t湖州康宏\n浙江\t嘉興市\(zhòng)t嘉興市禾通\n浙江\t金華市\(zhòng)t金華金宇\n浙江\t臨海市\(zhòng)t臨海市馭馬\n浙江\t寧波市\(zhòng)t寧波合辰\n浙江\t寧波市\(zhòng)t寧波鑫之杰\n浙江\t寧波市\(zhòng)t寧波鑫通達\n浙江\t寧波市\(zhòng)t寧波萬事得\n浙江\t寧豪谜縣\t寧波宏亞\n浙江\t紹興市\(zhòng)t紹興駿捷\n浙江\t紹興市\(zhòng)t紹興瑞達\n浙江\t紹興市\(zhòng)t紹興諸暨愛馬\n浙江\t臺州市\(zhòng)t臺州市隆馬\n浙江\t臺州市\(zhòng)t臺州運通博陽\n浙江\t桐鄉(xiāng)市\(zhòng)t桐鄉(xiāng)市禾通\n浙江\t溫嶺市\(zhòng)t臺州市馭達\n浙江\t溫州市\(zhòng)t溫州華騰\n浙江\t溫州市\(zhòng)t溫州將軍\n浙江\t義烏市\(zhòng)t義烏市龍馬\n浙江\t舟山市\(zhòng)t舟山明橋",

• \t：代表聯(lián)級
• \n：代表換行
• drop_type：0.聯(lián)動手负、1.省選擇无牵、2.市選擇、3.區(qū)選擇、4.不聯(lián)動
• 思路：
  • 去重灸眼、存儲卧檐、截取

const data = linkage.split("\n").map(e => e.split("\t"))
this.columns.splice(0);
const onePicker = [], twoPicker = [], threePicker = [];
data.forEach(e => {
    e.forEach((i, index) => {
        if(index === 0){
            if(onePicker.indexOf(i) === -1) {
                onePicker.push(i);
                if (drop_type == 0 || drop_type == 2 || drop_type == 3) {
                    this.columns.push({
                        text: i,
                        children: []
                    })
                }
            }
        } else if (index === 1) {
            if(twoPicker.indexOf(i) === -1) {
                twoPicker.push(i);
                if (drop_type == 0 || drop_type == 2 || drop_type == 3) {
                    this.columns.slice(-1)[0].children.push({
                        text: i,
                        children: []
                    })
                }
            }
        } else if (index === 2) {
            if(threePicker.indexOf(i) === -1) {
                threePicker.push(i);
                if (drop_type == 0 || drop_type == 3) {
                    this.columns.slice(-1)[0].children.slice(-1)[0].children.push({
                        text: i
                    })
                }
            }
        }
    })
})
if (drop_type == 1) {           // 省級
    this.columns.push({
        values: onePicker, defaultIndex: 1
    })
} else if (drop_type == 4) {    // 不聯(lián)動數(shù)據(jù)
    this.columns.push(
        { values: onePicker, defaultIndex: 1 },
        { values: twoPicker, defaultIndex: 1 },
        { values: threePicker, defaultIndex: 1}
    )
}

最后，實現(xiàn)想要的選擇器效果焰宣。