⑴ vue高德地图 如何一次添加多个点标记到地图实例
首先你需要提交你的公司的资料信息，地址信息 ，公司名称 以及电话信息，门脸照片给官方，
提交给官方后，他们会审核的，一般都是 1-7个工作日审核 审核通过后1-3天时间展现
如果发现地图有错误，可以进行纠错处理。
⑵ iview表格导出Excel时遇到的问题：导出.xls文件&导出的表格部分列错位
有一项目中有将表格内容导出到Excel表格的需求，ivew中table中有exportCsv方法可以直接使用（下图从官网组件API文档中截取），但导出来是.csv后缀名的文件，虽然表现出来也差不多，但咱需求文档上明确写的需要.xls，所以做了些改动。
源码中默认导出的的是.csv文件，想要导出.xls文件，只要在源码中加一个导出.xls文件的选择项就好
更改文件：
node_moles/iview/dist/iview.js :
我这边是新增了一个exportXls方法，内容除".xls"后缀名以外和exportCsv方法一致
node_moles/iview/src/components/table/table.vue:
表现为（模拟数据）：
第一行第二行的内容列一部分跑到了后面的列里，并把后面列的内容挤跑了
而我原本的数据是（模拟数据，以便理解）：
原因如下红框部分 ：
解决方案：
给初始数据的英文符号“,”替换成中文符号“，”
content = content.replace(/\,/g, '，')；
⑶ iView Admin升级iview 4.0
原来用的iView 3用了蛮久了，最近发现iView官方都改名了，应该是象征着新的开始，所以也琢磨着升级到4.0.
记录下升级涉及的具体操作。
1.package.json 中，添加新包 view-design：
2.Webpack 入口 main.js 中，把原先引用的 iview 替换为 view-design.
3.如果是按需引用，任何使用 from 'iview' 的都要替换为 from 'view-design’。
4.还包括以下零星几个文件中的老版本的iview样式引用需要处理
/src/index.less:
/src/locale/index.js
⑷ 轻量级富文本编辑器quill editor结合iview的使用
vue-quill-editor是我们在使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余，有可能导致提交失败，或者是用户体验很差，数据要传递很久才全部传送到服务器。 因此，在富文本编辑的过程中，对于图片的处理，我们更合理的做法是将图片上传到服务器，再将得到的图片链接插入到富文本中，以达到最优的体验。
首先安装quill editor npm install vue-quill-editor --save
全局挂载
在main.js中引用
使用
在需要用到富文本的vue中引用和配置quill editor工具栏
在editorOption中的handlers事件中处理图片上传（配置中的handlers是用来定义自定义程序的）
iview自带的upload上传自带三个函数
在methods里面处理一下图片
如果有错误，欢迎大家多提提意见~
⑸ iview Upload在beforeUpload时将文件传给后台该怎么写呢
这几天遇到一个问题，在Upload组件中上传之前需要添加一个Modal，阻止上传， 提示用户信息，用户点击确认按钮后，再进行上传，
理想总是很丰满，过程真是狗血呀
于是在API 也找到了方法，提供了一个before-upload方法可以使用，于是乎，兴高采烈的再before-upload中写了
⑹ iView爬坑记——表单验证
版本：iView 2.7.4
自从项目用了iView之后，感觉做新需求的一半时间都在疯狂踩坑，所以写个文档记录一下踩过的坑。
此篇为iView表单验证的爬坑记录。
更新：2019.3.10
在项目开发中，表单验证时一直出现各种“不能为空”、验证不通过等情况，但是自身输入和验证方法没有问题时，一般来说是输入框的value为 undefined 的。
比较简单的检测方法就是写一个验证方法，打印或 debugger 查看此时的输入值的取值（ value ）是否为输入值，如果不是或为 undefined ，那么就是取值错误，而非验证方法错误。
参考文档例子：
解决方法 ：
虽然我们在官网上会看到类似例子：
但是建议放弃利用这个方法验证输入值的数据类型。
例如，该验证方法的 type 类型有 number ，但它默认获取输入值为 string ，所以会导致 type 不符（并非因为输入的值不是数字）。
现在用的版本中还未修复此问题，如果已修复则可忽视该建议
在平时项目中，会遇到需要选择日期，但提交时日期不能为空这一需求，那么应该如何验证？
根据上面第一条打印 value 值，发现如果日期没有选择，日期选择器上的 value 值为 ["",""] （使用的是 <DatePicker type="date"></DatePicker> ）。
解决方法：
这时候就不能根据长度验证，所以必须循环/遍历判断 value 的数组每一项是否为空。
之前表单验证时遇到一个问题，在不同电脑上， TimePicker 的最终数据值类型不同（不知道是否因为一个是Mac一个是Windows10）。
搜索了一下度娘，发现也有其他人有类似问题。
问题为：
Mac上 TimePicker 最终数据类型为 数组 ，而Win10上 TimePicker 最终数据类型为 本地时区时间 （例如：2017-11-16T05:23:20.000Z）。
解决方法：
表单提交前记得判断 TimePicker 最终数据的类型，避免传值给后端时报错。
表单验证规则中， trigger 属性填写的是在什么情况下触发该验证，例如 blur 或者 change 。
但是我们会有某些需求，需要让该输入框在提交的时候才验证，并不需要实时验证，此时就会有把 trigger 删掉的做法。
该做法的结果是， 一进入有表单的页面时，表单就会进行一次校验 。
有时候在项目中会有几个表单的输入框使用同一个校验方法（比如校验数字、身份证之类的），需要根据页面情况显示特定的错误信息提示，但是这个校验方法又是单独一个JS文件。
那么可以在校验规则上添加 message ，写上特定的错误信息提示，这样页面上显示的就是特定的错误信息提示。
在规则中有未填或填错，会有正常提示，但是如果全部填写，步骤1却没办法判断成功并进入方法，会直接报错，有可能是写自定义规则的时候，没有写 callback() 。
⑺ iView怎么用
我正在使用iview， 首先保证系统有node.js, 可以支持npm安装，然后按照下面的简单步骤进行：
npm install iview --save
这样在你的package.json可以看到：
"dependencies": {
"axios": "^0.16.2",
"iview": "^2.0.0-rc.13",
在你的main.js这种文件里面（也就是你的工程里面new Vue的那个文件），加入下面代码：
import iView from 'iview';
Vue.use(iView);
然后在自己新加的component 里面，你就可以直接使用iview的控件了，例如<Table>，很方便也很美观。
最后推荐你研究下iview-admin这个，如果是做一个简单的网站，比如cms管理，你可以直接下载他们的工程，参考他们的代码，甚至直接这个工程进行修改。
⑻ 如何使用iview组件
iViewMediaPro 是一个可以快速简单的组织、显示、播放数码图片、字体、影象、声音或其他多媒体文件，并可以自动划分图片格式并整理归纳的软件。支持超过130种文件格式。还能以PDF的形式对图片进行电子书一样的浏览，兼容了MicrosoftWard、RTF、WMV、WMA等各个格式和平台的播放，方便快速管理与查找文件。
iViewMediaPro 3.1序列号（任选其一，或者用压缩包中提供的注册工具）
edi46-gfnax-ku9ns-xrpnt-rp6gr-efykb
4c9if-g3akg-8yv27-vv35k-tww3e-eytbb
gfct8-j9bv7-w9crg-g8acu-zg3xq-n45cb
⑼ iview的table的push怎么使用
可以把包含空间的路径部分用双引号引起来
例如我在c盘的program files文件夹中建了一个a.txt文件
可以使用这种形式打开
system("c:\\\"program files\"\\a.txt");注意每个双引号前要有转义字符\前缀
⑽ Upload组件上传限制（宽、高、尺寸、格式）
iview-Upload组件官网链接： https://iview.github.io/components/upload
效果展示
css
.out-box{
width: 100%;
border: 1px solid #e6e6e6;
border-radius: 8px;
padding: 20px 20px 10px;
}
.img-border{
border: 1px solid #e6e6e6;
border-radius: 8px;
margin-right: 20px;
width:100px;
height:100px;
}
.upload-box{
width: 100px;
height:100px;
display: inline-block
}
.upload-inner-box{
width: 100px;
height: 100px;
font-size: 40px;
text-align: center;
background: #F5F5F5;
}
.upload-tip{
color:red
}
template
<div class="out-box">
<img class="img-border" v-if="seeView" :src="this.imageUrl" />
<Upload ref="uploadFiles"
:show-upload-list="false"
:max-size="5120"
:on-success="handleSuccess"
:on-exceeded-size="handleMaxSize"
:before-upload="beforeUploadImg"
:loading="true"
type="drag"
:format="['jpg','jpeg','png','gif']"
:on-format-error="handleFormatError"
action="url"
class="upload-box">
<div class="upload-inner-box">
<div style="padding-top: 20px">+</div>
<div style="font-size: 12px">请上传图片</div>
</div>
</Upload>
<div class="upload-tip">图片大小勿超5M，尺寸为{{minWidth}}*{{minHeight}}，勿小于该尺寸，且尽量以该长宽比制图以保证页面效果</div>
</div>
data
seeView:"false",//是否展示已上传的图片
imageUrl:"",//上传图片的url
url:"",//上传的地址
minWidth:number,//最小宽度
minHeight:number,//最小高度
methods
//上传成功
handleSuccess(response, file, fileList) {
this.imageUrl = response.result;
this.seeView = true;
},
//上传的文件大小超出要求
handleMaxSize() {
this.$Modal.warning({
title: "提示",
content: "上传缩略图大小不能超过5M!!!",
});
},
//上传文件格式不符合要求
handleFormatError() {
this.$Modal.warning({
title: "提示",
content: "上传缩略图格式错误!!!",
});
},
//上传前对图片宽高的检验
beforeUploadImg(file) {
this.checkImageWidth(file, minWidth).then((checkWidth) => {
if (checkWidth) {
this.checkImageHeight(file, minHeight).then((checkHeight) => {
if (checkHeight) {
this.$refs.uploadFiles.post(file);
}
});
}
});
return false;
},
// 异步方法 检验图片宽度
async checkImageWidth(file, widthCheck) {
let width = await this.getImageWidth(file);
let checkWidth = width > widthCheck || width == widthCheck;
if (!checkWidth) {
this.$Notice.warning({
title: "图片宽度错误",
desc:
file.name +
" 的宽度为" +
width +
"px, 请上传宽度大于" +
widthCheck +
"px的图片. ",
});
}
return checkWidth;
},
// 获取图片宽度
getImageWidth(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
if (reader.readyState == 2) {
const img = new Image();
img.src = reader.result;
img.onload = function () {
resolve(this.width);
};
}
};
});
},
// 异步方法 检验图片高度
async checkImageHeight(file, heightCheck) {
let height = await this.getImageHeight(file);
let checkHeight = height > heightCheck || height == heightCheck;
if (!checkHeight) {
this.$Notice.warning({
title: "图片高度错误",
desc:
file.name +
" 的高度为" +
height +
"px, 请上传高度大于" +
heightCheck +
"px的图片. ",
});
}
return checkHeight;
},
// 获取图片宽度
getImageHeight(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
if (reader.readyState == 2) {
const img = new Image();
img.src = reader.result;
img.onload = function () {
resolve(this.height);
};
}
};
});
},