工做遇到的问题总结 - vue+iview

时间 2019-11-30

标签遇到问题总结 vue+iview vue iview 繁體版

原文原文链接

使用iview的分页的时候，怎么使分页回到默认页面，好比第一页,必定要写上.sync不然不起做用

<Page :total="addtotal" size="small" :current.sync='pageSizeOpts.curr'></Page>css

VUE中axios进行表单请求的配置

vue中，使用axios进行请求，使用了proxyTable来进行代理解决跨域问题，可是请求接口的协议为https，本地是localhost，基础的配置是黄色部分，通常请求为http的能够知足，出现https的就须要把红色部分加上html

proxyTable: { vue

'/api/**': { // use proxywebpack

target: 'https://visualization.sec.wanmei.com',ios

changeOrigin: true,git

secure:false,github

pathRewrite: {'^/api': '' },web

header:{npm

Referer:'https://visualization.sec.wanmei.com' 请求的真实地址element-ui

}

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,

//跨域请求是否须要凭证，默认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中无数据

示例：

</FormItem>

</FormItem>

</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中要进行传参

http://www.javashuo.com/article/p-zqwesirx-cn.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进行文件读取内容

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文件中引入

Vue的形式

在webpack.prod.conf.js中

在对应的文件目录下放该ico