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 相关文章推荐
javascript Prototype 对象扩展
May 15 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
PHP四大安全策略
2014/03/12 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
jquery等待效果示例
2014/05/01 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
JS常用算法实现代码
2016/11/14 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
动态创建类实例代码
2009/10/07 Python
python实现解数独程序代码
2017/04/12 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python调用c++传递数组的实例
2019/02/13 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书