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

淩亂°似流年 2023-08-17 16:33 143阅读 0赞

### 使用iview的分页的时候，怎么使分页回到默认页面，比如第一页,一定要写上.sync否则不起作用 ###

### 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][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][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][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";

1.  在webpack.base.config中
2.  module.exports = \{entry: \["babel-polyfill", "./app/js"\]\};

引入之后依然不能使用，报的是无效字符的错误，且是和iview相关的问题；

解决问题，因为iview是按需引入的，需要将红圈注掉就可以正常展示页面了（表示不可以按需引入）

** 根据后台返回的二进制流下载excel文件**

在axios中要进行传参

[https://www.cnblogs.com/rongjuan/p/9644676.html][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进行文件读取内容 ###

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

转载于:https://www.cnblogs.com/fyjz/p/11598473.html

[https_blog.csdn.net_suchaiyishengtui_article_details_82427688]: https://blog.csdn.net/suchaiyishengtui/article/details/82427688
[https_cn.vuejs.org_v2_guide_render-function.html]: https://cn.vuejs.org/v2/guide/render-function.html
[www.baidu.com]: http://www.baidu.com/
[https_blog.csdn.net_weixin_42869548_article_details_81382853]: https://blog.csdn.net/weixin_42869548/article/details/81382853
[https_www.cnblogs.com_rongjuan_p_9644676.html]: https://www.cnblogs.com/rongjuan/p/9644676.html