使用iview的分页的时候，怎么使分页回到默认页面，比如第一页,一定要写上.sync否则不起作用
<Page :total="addtotal" size="small" :current.sync='pageSizeOpts.curr'></Page>
VUE中axios进行表单请求的配置
vue中，使用axios进行请求，使用了proxyTable来进行代理解决跨域问题，但是请求接口的协议为https，本地是localhost，基础的配置是黄色部分，一般请求为http的可以满足，出现https的就需要把红色部分加上
proxyTable: {
'/api/**': { // use proxy
target: 'https://visualization.sec.wanmei.com',
changeOrigin: true,
secure:false,
pathRewrite: {'^/api': '' },
header:{
Referer:'https://visualization.sec.wanmei.com' 请求的真实地址
}
}
}
vue axios请求的时候，需要提交的参数的form表单提交，那提交的参数（如下）
那么我们在对axios进行全局配置中需要特别配置，如下
我们需要进行配置红色部分要加上，然后在我们的具体请求的接口部分需要使用qs来进行编译，然后加上header这部分
这是一维对象或者数组的情况
当要传的参数是这种形式 {aaa:{ccc:111}}，需要首先将{ccc：111}进行格式化（JSON.stringify({ccc:111})）;
最后传的时候应该是 {“aaa”: JSON.stringify({ccc:111})};
这样，就将整体都转成了JSON格式的字符串，在axios请求中，依然是需要进行QS.stringify的；
需要注意的是：进行数据赋值的时候，要注意赋值的是基本数据类型还是引用数据类型，如果是引用数据类型，当不同的属性对应同一个引用数据类型的值的时候，那指向的地址是一样的，在操作的时候就会出现混乱的情况，为了避免这种情况，可以使用深克隆或者是循环赋值的解决方式，避免指向一个地址就ok
为了使vue打包后的文件适用于各种服务器（意思是公共部分的接口不是固定的），需要怎么配置
需要使dist文件可以自适应各个服务器，不必根据不同的服务器，手动修改接口的公共部分url
在 1）文件中， ，将apiBase写成‘“”’，双引不可以省略，修改之后打包，可以适应各种服务器
需要注意的是：在本地开发的时候，使用了反向代理的情况下，这里的apiBase不可为空，apiBase:’”/api”’,这样是为了反向代理找到一个目标url
使用vue-charts和vue-grid，拖拽图表的一个组件需要注意的地方
用x-chart，vue-echart和vue-grid的是，安装的依赖包，不可以是版本号，需要引入两个地址，否则会有很多功能不能使用，并且echarts的length的scroll功能，需要引入具体的length中的scroll的js才可以使用，否则报错
"vue-echarts": "https://github.com/yugasun/vue-echarts#pro/compass",
"vue-grid-layout": "https://github.com/yugasun/vue-grid-layout#pro/compass",
在使用上面的组件的基础上，在拖拽的盒子中，放入表格组件，拖拽过程中，提示column一直更新
拖拽表格的时候，提示column一直在更新，由于column是动态生成的，而且是将column在拖拽过程中进行数据的变动，所以一直提示，
处理方式，将column的处理，放在当前的组件中，这就不会导致报错了
在vue中，使用i-view，里边的表格中的内容需要进行换行，会有\n，怎么能在表格中也换行
答：在表格的column的配置中 ， 这里的要将\n换成<br>,在render渲染函数中，使用domprops的属性
使用反向代理，必须有一个具体的路径，不能直接写一个 /
使用vue中的iveiw的tab组件，在切换的时候，更换里边你的table的内容，速度很慢
原因是将table写在了每个的tabContent中，对于只变更数据的情况下，可以将table放在整个Tab组件的外面，这样table的渲染速度大大提升
对于内容不一样的页面，根据情况进行处理
传统方式引入vue以及iview的js，css，发现icon不显示
需要引入font文件，font文件中包含这几个文件，并且保持font文件夹和iview.css文件保持同级；
引入之后发现显示的按钮不显示，或者不对应，原因是引入的那几个ionicons较老，没有与iview新版的同步，换一组版本较新的文件就好了
使用iview的select的功能，好几个下拉联动的情况下，当点击后面的几个的时候，再次切换第一个，那下面的的列表在获取到数据的情况，页面展示如右图，无数据
为什么会出现这样的情况？？？
原因是iview的select中使用了 filterable
https://blog.csdn.net/suchaiyishengtui/article/details/82427688
这里在点击了后面的被联动的几个下拉之后，这个filter中其实是有值的，不管这个值是什么，结果是对我现有的列表进行了过滤，并且不再显示
解决的方法：在每次进行切换或者是别的操作的时候，在列表发生变化重新赋值的位置，对这个filter进行清空
this.$refs.datasourceref.$data.query="";
这样就可以在保证可以过滤的情况下，进行任意切换了；
Render问题
在使用vue和iview的时候，使用了iview中的table组件，然后对table组件的最后一列进行自定义渲染，当渲染a标签的时候，需要 给a标签上加上href的属性，应该怎么加
https://cn.vuejs.org/v2/guide/render-function.html
render: (h, params) => {
return h('div', [
h('a', {
props: { //这里是加一些不是标签上的自身属性 -- 组件 props
type: 'primary',
size: 'small'
},
attrs:{ //这里加自身属性，普通的 HTML 特性
Href:www.baidu.com
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, 'View')
]);
}
在iView中的table的column中，使用了render函数，函数中使用inputNumber组件，怎么监听value和blur等事件
{
title:"顺序号",
key:"ordernum",
sortable: true,
render: (h, params,index) => {
return h("InputNumber", {
props: {
value: params.row.ordernum,
min: 0
},
on: {
input: val => { //监听value的变化
this.pageorder.discover_id = params.row.id;
this.pageorder.ordernum = val;
},
'on-blur':()=>{ //监听失去焦点事件，这里注意要使用’on-blur’事件
this.changeOrderNumberFn();
}
}
})
}
}
传统方式引入iview的icon，出现只能显示一个的问题，并且会到最后面（input也是）
原因是：使用传统的CDN引入iview，icon的使用，必须在icon的外层加一个别的标签将icon包着，行内元素或者块元素都可以，只有有就可以
使用iview的时候，对表单进行验证的时，有时候会保留上次提示的错误
https://blog.csdn.net/weixin_42869548/article/details/81382853
this.$refs[formName].resetFields() 使用此方法可以去除上一次的保留（写在表单框关闭状态的后面，不可以写在表单框出现的时候，容易引起不必要的麻烦），但是出现了一个问题是，由于根据类型不同，打开的表单框中展示的可验证的内容不同，这时候会报错，indexOf undefined，所以要对form中的rules进行重新的赋值，不同的验证使用不同的验证规则，否则报错
使用iview的时候，iview的时候，使用select时，要注意，@on-change事件中，要对获取的value值进行判断，是否存在
不存在的情况下，说明是变了一下，但是与上次保持一致，这时候不需要进行任何操作，不进行判断就可能会出现错误，比如往数组中添加对象，对象是根据选中的值来确定的，有可能添加进空对象，导致报错
使用element-ui,同时使用了iview，两个组件中的Table组件都有用到，在引入的时候，会报重命名的错，这个怎么解决？
使用别名来
import {TableColumn,Table as NTable,ColorPicker} from 'element-ui';
Vue.use(NTable).use(ColorPicker);
使用了别名的情况下，element-ui不能使用Vue.component(TableColumn.name, TableColumn);这种方式来引入
import { Table,Card} from 'iview'
Vue.component('Table', Table);
使用axios进行表单请求？
一定要安装qs，没有安装，先进行安装 npm install qs
将axios的
公共设置中的headers设置为参数，赋上默认值 {'Content-Type':'application/json;charset=UTF-8'}
export const request = async ({
url = '',
method = 'GET',
data = {},
params = {},
headers={'Content-Type':'application/json;charset=UTF-8'},
timeout = 3000,
withCredentials = true
}, { autoToastError = true } = {}) => {
let res;
console.log(headers)
try {
res = await axios({
url: `${process.env.apiBase}${url}`,
// url: "https://pushmanager.sec.wanmei.net"+url, //直接请求，关闭反向代理那段代码
method,
data,
params,
timeout,
headers,
headers,
//跨域请求是否需要凭证，默认false
withCredentials
})
} catch (err) {
res = buildErrorResponse(err)
}
在请求接口的js中
import qs from 'qs'
export const requestAddAdmin= async (data={},headers={}) => {
return await request({
url: '/manage/add',
method: 'post',
data: qs.stringify(data), 这个必须要进行格式转化，否则出现400的问题
headers:{'Content-Type':'application/x-www-form-urlencoded'} ，对headers进行一个赋值
})
};
使用axios进行表单请求（包含文件上传）？vue+iview
正如上一个问题，当进行表单提交的时候，需要对data进行转义data=qs.stringify(data)；
但是在包含文件上传的时候，不可以进行转义，因为包含了file文件的内容，转义就会导致请求失败，header中无数据
示例：
<Modal v-model="modaladdflag" :title="modelType=='add'?'添加服务号':'修改服务号'" draggable width="600" @on-ok="handleSubmit('formValidate')">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="用户名" prop="name">
<Input type="text" v-model="formValidate.name" placeholder="用户名"/>
</FormItem>
<FormItem label="文件" prop="name">
<Button icon="ios-cloud-upload-outline" @click="trimUploadFn">上传图片</Button>
<input id="uploadImg" type="file" name="file" ref="upload" @change="getFile($event)" style="display:none;">
<span v-text="file"></span>
</FormItem>
<FormItem label="描述" prop="description">
<Input v-model="formValidate.description" type="textarea" placeholder="描述" :autosize="{minRows: 2,maxRows: 8}" />
</FormItem>
</Form>
</Modal>
getFile(event){
this.formValidate.file = event.target.files[0]; 关键语句
this.file = event.target.files[0].name;
},
handleSubmit (name) {
let event = window.event;
event.preventDefault();
this.$refs[name].validate((valid) => {
if (valid) {
this.PostFn(name);
} else {
this.$Message.error('请填写必须部分');
};
});
},
PostFn:async function(name){
var info;
let formData = new FormData(this.$refs[name]); 关键语句
formData.append('name', this.formValidate.name);
formData.append('description', this.formValidate.description);
formData.append('id', this.formValidate.id);
formData.append('file', this.formValidate.file);
if(this.modelType=="add"){
info = await requestaddSubscription(formData);
}else{
info = await requestupdateSubscription(formData);
};
if(info.code == 0){
this.modaladdflag = false;
};
},
使用axios进行表单请求（包含文件上传）？有的电脑能展示，有的不能展示的问题；
原因是new FormData（），括号中不能写dom获取，写了就报错
使用vue，兼容问题；；打包项目之后，在ie下不能展示的问题；出现的问题
是说iview下的某个js下出问题
解决：首先是安装
1.安装 npm install babel-polyfill
2．在main.js中引入.
引入方式一 require("babel-polyfill");
引入方式二 import "babel-polyfill";
- 在webpack.base.config中
- module.exports = {entry: ["babel-polyfill", "./app/js"]};
引入之后依然不能使用，报的是无效字符的错误，且是和iview相关的问题；
解决问题，因为iview是按需引入的，需要将红圈注掉就可以正常展示页面了（表示不可以按需引入）
根据后台返回的二进制流下载excel文件
在axios中要进行传参
https://www.cnblogs.com/rongjuan/p/9644676.html
let info = await sendExcel(obj);
const blob = new Blob([info.data], {
type: 'application/octet-stream'
});
let fileName = '导出信息.xls';
if ('download' in document.createElement('a')) { // 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName)
};
Vue进行文件读取内容
<input id="uploadImg" type="file" name="file" ref="upload" @change="getFile($event)" style="display:none;">
getFile(event){
let this_ = this;
this_.formItem.blinecontent="";
this_.spinShowModal = true;
var selectedFile = event.target.files[0];
this.formItem.file = selectedFile.name;
const reader = new FileReader();
reader.readAsText(selectedFile)
reader.onload = function () {
//当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
this_.formItem.blinecontent=this.result;
this_.spinShowModal = false;
};
},
如何引入favoico.ico
将favoico.ico的文件置于与index.html同级位置
传统方式：在index.html文件中引入
<link href="/favicon.ico" rel="icon" type="image/x-icon" />
Vue的形式
在webpack.prod.conf.js中
在对应的文件目录下放该ico
