赞
踩
npm i element-ui -S
npm install vue-resource --save-dev
在 main.js 文件中引入
/* 引入 Vue 框架 */
import Vue from 'vue'
/* 引入 ElementUI 组件 */
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
/* 引入资源请求插件 */
import VueResource from 'vue-resource'
Vue.use(ElementUI)
/* 使用VueResource插件 */
Vue.use(VueResource)
接下来,在 Vue 组件化页面进行开发,使用 ElementUI 组件的 Select 选择器(可清空单选),
这里使用 el-dialog 对话框包含 el-form 表单的结构写法(这不是本次问题的重点,同时省略去掉与此次问题无关的其他表单项),
具体用法参考使用文档:Element - The world’s most popular Vue UI framework
<el-dialog :title="isEdit?'编辑商家门店信息':'添加商家门店信息'" :visible.sync="modal1" width="50%"> <el-form :model="merchant" ref="merchant" :rules="rules" label-width="150px"> <el-form-item label="所属省市:" prop="province"> <el-select v-model="merchant.province" placeholder="请选择省份(直辖市)" @change="renderCity" clearable> <el-option v-for="item in provinceListAll" :key="item.name" :value="item.name"> </el-option> </el-select> <el-select v-model="merchant.city" placeholder="请选择城市" v-if="citySelectAble" clearable> <el-option v-for="item in cityListAll" :key="item.name" :value="item.name"> </el-option> </el-select> </el-form-item> </el-form> <span slot="footer"> <el-button @click="modal1 = false">取 消</el-button> <el-button type="primary" @click="handleDialogConfirm('merchant')">确 定</el-button> </span> </el-dialog>
定义相对应的数据字段 defaultMerchant (这里同理,与此次问题无关的字段不写入),同时初始化 Vue 实例的数据对象
<script> const defaultMerchant = { id: null, storeName: '', // 门店名称 province: '', // 所属省(直辖市) city: '', // 所属市 }; export default { data(){ return{ merchant: Object.assign({}, defaultMerchant), modal1: false, isEdit: false, rules:{ // 用于表单验证的规则 storeName:[{ required: true, message: '请输入商家的门店名称', trigger: 'blur' }], province:[{ required: true, message: '请输入所属省份(或者直辖市)', trigger: 'blur' }], }, provinceListAll: [], // 全国34个省份(包括直辖市)列表 cityListAll: [], // 全国各个城市列表 citySelectAble: false, // 城市是否可选 } }, watch: {}, created() {}, methods: {} } </script>
然后要做一个省份列表和城市列表,我看很多小伙伴是把这部分相关数据以 JSON 形式写在页面里或者存在数据库里,这样个人感觉有两点不足吧?**一是数据量很大,占用文件很多行数,降低性能和代码的可读性。二是数据不能进行实时更新(假如哪天新多出个城市或者城市改名什么的要去更改内容也麻烦)。这里我的做法是直接调用高德地图的 API 获取省份和城市列表,**开发文档可以参考:概述-Web服务 API | 高德地图API
或者参考我的另一篇文章的类似实例 —— vue-resource 的入门学习笔记:vue-resource 的入门学习笔记_无解的菜鸟晖 的博客-CSDN博客
当然开放的平台也有不足,就是需要发送请求,这个每个开发者的 Key 每天有限制请求次数,具体限制查看:流量限制说明-实用工具-开发指南-Web服务 API | 高德地图API
但是,这样请求到的数据比较实时、全面、准确,相比上面的做法会好很多,我们要做的就是减少对 API 的请求,所以可以用数组过滤器来减少请求(提升性能的同时又保证数据的准确性)
methods: { getAllProvinceAndCityList() { // 获取全国所有省份和城市的列表 var that = this; this.$http.get('https://restapi.amap.com/v3/config/district',{ // 高德地图的API params:{ key: this.mapApiKey, // 这个是申请的 Key,读者自行写入 keywords: '中国', subdistrict: 3, extensions: 'base' } }).then((response) => { that.provinceListAll = response.data.districts[0].districts; for (let i = 0; i < response.data.districts[0].districts.length; i++) { for (let j = 0; j < response.data.districts[0].districts[i].districts.length; j++) { that.cityListAll.push(response.data.districts[0].districts[i].districts[j]); } ### 结尾 学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。 **[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)** ![html5](https://img-blog.csdnimg.cn/img_convert/d35c2cf2d5364b4907e65f1856c923a4.png)
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。