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

使用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";

1. 在webpack.base.config中
2. 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

 

 

 

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