根据 Vant Picker 选择器转换对应的数据格式

最近遇到的问题是需要将拿到的数据格式转换成 vant Picker 想要的数据格式。

Vant

微信截图_20200624161012.png

下拉选择（联动）数据格式：

<van-picker show-toolbar title="标题" :columns="columns" />
export default {
  data() {
    return {
      columns: [{
          text: '浙江',
          children: [{
              text: '杭州',
              children: [{ text: '西湖区' }, { text: '余杭区' }],
            },{
              text: '温州',
              children: [{ text: '鹿城区' }, { text: '瓯海区' }],
            }],
        },{
          text: '福建',
          children: [{
              text: '福州',
              children: [{ text: '鼓楼区' }, { text: '台江区' }],
            },{
              text: '厦门',
              children: [{ text: '思明区' }, { text: '海沧区' }],
            }],
        }],
    };
  },
};

下拉选择（不联动）数据格式：

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

下面是后端返回的数据。如何根据后端返回的数据转换成 vant picker 想要的数据格式呢？

"linkage": "安徽\t安庆市\t安庆宜马\n安徽\t蚌埠市\t蚌埠市臣功\n安徽\t阜阳市\t阜阳赛达\n安徽\t合肥市\t合肥市贺悦\n安徽\t合肥市\t安徽亚达\n安徽\t合肥市\t安徽伟新行\n安徽\t六安市\t六安市泰源\n安徽\t芜湖市\t芜湖华达\n安徽\t宿州\t宿州蓝航\n北京\t北京市\t北京博瑞翔达\n北京\t北京市\t北京首汽腾达\n北京\t北京市\t北京华日通\n北京\t北京市\t北京东仁隆达\n北京\t北京市\t北京车豪\n北京\t北京市\t北京宏源亚兴\n北京\t北京市\t北京天一恒远服务有限责任公司\n北京\t北京市\t北京瑞豪成商贸\n重庆\t重庆市\t重庆万事兴\n重庆\t重庆市\t重庆银迅\n福建\t福州市\t福建太元\n福建\t晋江市\t晋江成达\n福建\t泉州市\t泉州鑫达\n福建\t三明市\t三明鹭翔\n福建\t厦门市\t厦门吉顺丰\n甘肃\t兰州市\t兰州金岛骄马\n广东\t东莞市\t东莞市久驰\n广东\t东莞市\t东莞市新天地\n广东\t东莞市\t东莞市欣达\n广东\t东莞市\t东莞市通华\n广东\t佛山市\t佛山市合自达\n广东\t佛山市\t佛山市顺德区万事得\n广东\t佛山市\t佛山市中衡骏达\n广东\t佛山市\t佛山市广物驭达\n广东\t广州市\t广州博程\n广东\t广州市\t广州成远\n广东\t广州市\t广东物通驭达\n广东\t广州市\t广州睿翼\n广东\t惠州市\t惠州市大华\n广东\t江门市\t江门博腾\n广东\t清远市\t清远市中衡骏达\n广东\t汕头市\t汕头市通利华月浦服务\n广东\t深圳市\t深圳市众深联\n广东\t深圳市\t深圳市安进机电设备\n广东\t深圳市\t深圳通利华龙岗\n广东\t深圳市\t深圳市通利华\n广东\t深圳市\t深圳市通利华前海\n广东\t湛江市\t湛江合达\n广东\t中山市\t中山市中达\n广东\t珠海市\t珠海市钜荣\n广西\t百色市\t百色方泰\n广西\t桂林市\t桂林鑫广达博达\n广西\t柳州市\t柳州鑫广达\n广西\t南宁市\t广西鑫广达\n广西\t南宁市\t广西马之悦\n贵州\t贵阳市\t贵州兴新田源烨\n贵州\t贵阳市\t贵州四扬日达\n贵州\t遵义市\t遵义锦驰\n海南\t海口市\t海南优之杰\n海南\t三亚市\t三亚优之杰服务\n河北\t保定市\t保定市威达\n河北\t邯郸市\t邯郸庞大赫峰\n河北\t廊坊市\t廊坊庞大赫峰\n河北\t秦皇岛市\t秦皇岛庞大赫峰\n河北\t石家庄市\t石家庄庞大赫峰\n河北\t石家庄市\t石家庄市冀东\n河北\t唐山市\t唐山冀东赫峰\n河北\t邢台市\t邢台庞大赫峰\n河北\t邢台市\t邢台弘美\n河北\t张家口市\t张家口庞大赫峰\n河南\t焦作市\t焦作双达\n河南\t开封市\t开封市容基\n河南\t洛阳市\t洛阳驰钊\n河南\t南阳市\t南阳兴业\n河南\t新乡市\t新乡市弘森\n河南\t信阳市\t信阳鑫联\n河南\t许昌市\t许昌正通马六\n河南\t郑州市\t河南冠豪\n河南\t郑州市\t河南裕华紫光\n黑龙江\t大庆市\t大庆广利达\n黑龙江\t哈尔滨市\t哈尔滨森华\n黑龙江\t哈尔滨市\t哈尔滨乾丰服务有限责任公司\n湖北\t武汉市\t武汉利达有限责任公司\n湖北\t武汉市\t武汉龙泰\n湖北\t武汉市\t湖北捷运宜达\n湖北\t襄阳市\t襄阳君和盛世\n湖北\t宜昌市\t宜昌恒信天龙\n湖南\t常德市\t常德时代阳光\n湖南\t郴州市\t郴州兴华诚\n湖南\t岳阳市\t岳阳华通\n湖南\t长沙市\t长沙德顺\n湖南\t长沙市\t湖南万乘\n湖南\t长沙市\t长沙博程骏粤\n湖南\t株洲市\t株洲市华兴\n吉林\t吉林市\t吉林市神华服务\n吉林\t四平市\t四平建达\n吉林\t松原市\t松原市征途路达\n吉林\t通化市\t通化冠喆\n吉林\t长春市\t吉林省华达\n吉林\t长春市\t吉林省仁德\n吉林\t长春市\t吉林省国兴服务\n吉林\t长春市\t长春久鼎\n江苏\t常熟市\t常熟市华通\n江苏\t常州市\t常州神马\n江苏\t常州市\t常州外汽金程\n江苏\t淮安市\t淮安市宏宇翔舜\n江苏\t江阴市\t江阴市盛达佳颖\n江苏\t昆山市\t昆山千江一马\n江苏\t连云港市\t连云港上达\n江苏\t南京市\t江苏乾丰\n江苏\t南京市\t南京通孚源\n江苏\t南通市\t南通银达\n江苏\t南通市\t南通弘业\n江苏\t如皋市\t如皋市金泽\n江苏\t苏州市\t苏州苏天\n江苏\t苏州市\t苏州国亚达服务\n江苏\t苏州市\t苏州浚和\n江苏\t太仓市\t太仓博泰\n江苏\t泰州市\t泰州明雅\n江苏\t无锡市\t无锡联众\n江苏\t无锡市\t无锡市众达\n江苏\t无锡市\t无锡荣事达贸易服务\n江苏\t吴江市\t吴江市东顺\n江苏\t徐州市\t江苏远方工贸实业有限责任公司\n江苏\t盐城市\t森风集团盐城义德\n江苏\t扬州市\t扬州华美达\n江苏\t宜兴市\t宜兴市荣诚\n江苏\t张家港市\t张家港通城\n江苏\t镇江市\t镇江维力达\n江西\t赣州市\t赣州金马\n江西\t南昌市\t江西戎马发展\n江西\t南昌市\t江西省亚泰\n江西\t上饶市\t上饶戎马\n江西\t宜春市\t宜春华达\n辽宁\t鞍山市\t鞍山北方\n辽宁\t大连市\t大连百利加\n辽宁\t锦州市\t锦州新东方\n辽宁\t辽阳市\t辽阳合兴\n辽宁\t盘锦市\t盘锦富田富达\n辽宁\t沈阳市\t沈阳中联服务\n辽宁\t沈阳市\t辽宁福达\n辽宁\t沈阳市\t沈阳鑫盛达\n内蒙古\t赤峰\t赤峰泽泰\n内蒙古\t呼和浩特\t内蒙古燕达\n宁夏\t银川市\t宁夏自立升\n青海\t西宁市\t青海泰洲弘车辆\n山东\t德州市\t德州通达\n山东\t济南市\t济南明盛\n山东\t济南市\t山东新骏\n山东\t济宁市\t济宁福乐途\n山东\t聊城市\t聊城金源\n山东\t临沂市\t临沂骏骐\n山东\t青岛市\t青岛中联信管理\n山东\t青岛市\t青岛恒昌\n山东\t青州市\t青州长兴\n山东\t日照市\t日照市佰世达\n山东\t潍坊市\t潍坊天虹\n山东\t烟台市\t烟台大成金马\n山东\t淄博市\t山东鸿达发展\n山东\t威海市\t威海驰航豪马\n山西\t大同市\t山西中盛瑞达贸易\n山西\t晋城市\t晋城市长淮\n山西\t太原市\t山西汇众汇达\n山西\t长治市\t长治市汇众汇达\n陕西\t西安市\t陕西唐兴\n陕西\t西安市\t陕西欣达\n陕西\t西安市\t陕西润达\n上海\t上海市\t上海绿地东\n上海\t上海市\t上海路帅\n上海\t上海市\t上海通锐\n上海\t上海市\t上海交运隆嘉\n上海\t上海市\t上海绿地杨浦\n上海\t上海市\t上海景和金沙\n四川\t成都市\t四川中鹏\n四川\t成都市\t成都东成\n四川\t成都市\t成都明友西物\n四川\t成都市\t四川城市车辆维修服务\n四川\t达州市\t达州市天一航旗铭峻\n四川\t德阳市\t德阳永信\n四川\t乐山市\t乐山天牛亿马\n四川\t绵阳市\t绵阳嘉成\n四川\t宜宾市\t宜宾一马\n天津\t天津市\t天津市骏达\n天津\t天津市\t天津市中乒北骏\n天津\t天津市\t天津骏雅\n天津\t天津市\t天津骏仁达\n新疆\t乌鲁木齐市\t新疆华达服务有限责任公司\n云南\t昆明市\t云南善为\n云南\t昆明市\t云南正马\n浙江\t苍南县\t苍南县荣睿\n浙江\t慈溪市\t慈溪市新亚\n浙江\t海宁市\t海宁市禾通\n浙江\t杭州市\t杭州富阳万达\n浙江\t杭州市\t浙江康桥宏马\n浙江\t杭州市\t浙江元通瑞达\n浙江\t杭州市\t浙江孚达\n浙江\t杭州市\t杭州骏马\n浙江\t杭州市\t杭州睿马\n浙江\t杭州市\t杭州爱马\n浙江\t杭州市\t杭州森悦一达\n浙江\t湖州市\t湖州康宏\n浙江\t嘉兴市\t嘉兴市禾通\n浙江\t金华市\t金华金宇\n浙江\t临海市\t临海市驭马\n浙江\t宁波市\t宁波合辰\n浙江\t宁波市\t宁波鑫之杰\n浙江\t宁波市\t宁波鑫通达\n浙江\t宁波市\t宁波万事得\n浙江\t宁海县\t宁波宏亚\n浙江\t绍兴市\t绍兴骏捷\n浙江\t绍兴市\t绍兴瑞达\n浙江\t绍兴市\t绍兴诸暨爱马\n浙江\t台州市\t台州市隆马\n浙江\t台州市\t台州运通博阳\n浙江\t桐乡市\t桐乡市禾通\n浙江\t温岭市\t台州市驭达\n浙江\t温州市\t温州华腾\n浙江\t温州市\t温州将军\n浙江\t义乌市\t义乌市龙马\n浙江\t舟山市\t舟山明桥",

\t：代表联级
\n：代表换行
drop_type：0.联动、1.省选择、2.市选择、3.区选择、4.不联动
思路：
- 去重、存储、截取

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) {    // 不联动数据
    this.columns.push(
        { values: onePicker, defaultIndex: 1 },
        { values: twoPicker, defaultIndex: 1 },
        { values: threePicker, defaultIndex: 1}
    )
}

最后，实现想要的选择器效果。