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