Mint UI实现A-Z字母排序的城市选择列表


Posted in Javascript onDecember 28, 2018

本文实例为大家分享了Mint Ul实现A-Z字母排序的城市选择列表的具体代码,供大家参考,具体内容如下

效果图如下:

Mint UI实现A-Z字母排序的城市选择列表

项目文件存放路径图:

Mint UI实现A-Z字母排序的城市选择列表

pinying.js 和 city.json文件下载传送门

所有代码如下:

<template>
  <mt-index-list>
    <mt-index-section v-for="letter in citySortArr" :key="letter" :index="letter">
      <mt-cell v-for="cityName in cityArr" :key="cityName" v-if="cityName.key == letter" :title="cityName.value "></mt-cell>
    </mt-index-section>    
  </mt-index-list> 
</template>

<script>
import city from "../assets/json/city"//导入所有城市的JSON
import { makePy } from "../assets/js/pinying"//导入插件获取所有城市中文的大写首字母

export default {
 data () {
  return {
   arr: [],//存放初始筛选的城市名称
   cityArr: [],//存放第二次筛选后所有城市名称
   citySort: [],//存放初始获取城市首字母大写的数组
   citySortArr: []//存放第二次筛选重复,不存在的城市首字母数组
  };
 },
 created () {

  /**
   * 将json数据中的无用数据剔除
   */
  for (let i in city) {
   if (city[i].name != "请选择") {//将第一层数据中为 “请选择” 的剔除掉
    this.arr.push(city[i].name);
    for (let j in city[i].sub) {//将第二层数据中为 “请选择 和 其他” 的剔除掉
     if (
      city[i].sub[j].name != "请选择" &&
      city[i].sub[j].name != "其他"
     ) {
      this.arr.push(city[i].sub[j].name);//将处理后的数据存放在数组中,等待第二次筛选处理
     }
    }
   }
  }

  /**
   * 配置相关数据
   */
  for (let k in this.arr) {
   let cityKey = makePy(this.arr[k])[0].substring(0, 1);//获取每一个市区的首字母
   let cityValue = this.arr[k];//获取所有市区
   this.citySort[cityKey] = cityKey;//利用对象特性,剔除重复的字母,并将剔除后的字母存进对象中

   //将所有市区信息 以( 字母 - 市区名 )的格式存在至数组中
   this.cityArr[k] = {
    key: cityKey,
    value: cityValue
   };
  }

  /**
   * 将处理后的首字母数据对象,存放至数组中
   */
  for (let p in this.citySort) {
    this.citySortArr.push(this.citySort[p]);
  }

  /**
   * 将真实存在的市区首字母按A-Z进行排序
   */
  this.citySortArr = this.citySortArr.sort();

 }
};
</script>

<style>
.mint-cell-title {
  flex: 0 0 auto;
}

.mint-indexsection-index {
  text-align: left;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 #Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 #Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 #Javascript
微信小程序时间控件picker view使用详解
Dec 28 #Javascript
微信小程序时间选择插件使用详解
Dec 28 #Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 #Javascript
Angular6新特性之Angular Material
Dec 28 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
深入分析Javascript事件代理
2016/01/30 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
深入Python函数编程的一些特性
2015/04/13 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
python实现井字棋游戏
2020/03/30 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
班级活动策划书
2014/02/06 职场文书
大学生就业自荐书
2014/06/16 职场文书
高中同学会活动方案
2014/08/14 职场文书
2014年检验科工作总结
2014/11/22 职场文书
团组织推优材料
2014/12/29 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python