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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 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
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
django 发送手机验证码的示例代码
2018/04/25 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
利用python画出AUC曲线的实例
2020/02/28 Python
python文件读取失败怎么处理
2020/06/23 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
社团成立邀请函
2014/01/08 职场文书
刊首寄语大全
2014/04/11 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
企业员工辞职信范文
2015/05/12 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
python获取带有返回值的多线程
2022/05/02 Python