工做遇到的問題總結 - 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。