在vue.js项目中使用Mint-ui的索引清单功能

安装和配置mint-ui库

    首先我们先找到我们的项目文件夹，cmd打开终端。然后再去mint-ui的官网通过 npm i --save mint-ui安装该ui库。接下来我们找到main.js主文件，import MintUI from 'mint-ui'     import 'mint-ui/lib/style.css'   Vue.use(MintUI)  进行配置即可。

使用Mint-ui

    Mint-ui多用于城市的选择，我们可以直接先去官网把代码COPY下来，运行试试效果。然后就可以对代码就行改造了，list数组肯定是要用我们真实的数据的，在vue中我们需要用v-for循环将数组遍历出来。代码如下图所示

 其中CityList的数据类型大概是这样的

[ { index： "A" ,list： [ id："1", name："北京", py：'beijing' ] } ...{ index： "Z" ,list： [ id："100", name："郑州", py：'zhengzhou' ] } ]

其他属性应该很好理解，其中拼音是为了进行排序。用obj.list.py.sort()方法就可以了，当然并不是所有的数据接口都是这样的，我们需要对接口的数据进行处理，改造成这样的结构就可以了，因为接口数据跟CityList结构不会相差太远。如果完全不匹配的话，那就叫后端给过接口吧！！！