vue.js ElementUI
阿新 • • 發佈：2018-11-19
校驗:
1:前臺校驗 不需要使用req,直接在校驗規則中 用true 和false 在校驗.
否則就會造成校驗兩次的.
2: <el-form : 上設定abel-width 表單域標籤的寬度，作為 Form 直接子元素的 form-item 會繼承該值.
<el-form :model="actualBeneficiary" label-width="100px" :rules="rules" ref="actualBeneficiary">3: 設定預設
按鈕: <template slot-scope="scope"> <el-button size="small" class="default" :class="{ active:indexClass == scope.$index }" @click="defaultLinkman(scope.$index, scope.row)">設為預設經辦人 </el-button> </template> 事件: defaultLinkman(index, row) { //設定預設經辦人標識位 row.defaultLinkMainInfo = '1'; this.$notify({ title: '預設經辦人設定成功', message: '', type: 'success' }); this.indexClass = index; }, 樣式: .default { color: #404040; background: #f8f8f8; } .active { color: #fff; background: #0066cc; }
4: 陣列刪除:
按鈕: <template slot-scope="scope"> <el-button size="small" @click="deleteLinkman(scope.$index, scope.row)">刪除</el-button> </template> 事件: deleteLinkman(index, row) { this.custLinkMainInfoList.splice(index, 1); }, splice方法: splice(index,len,[item])它也可以用來替換/刪除/新增陣列內某一個或者幾個值（該方法會改變原始陣列） index:陣列開始下標 len: 替換/刪除的長度 item:替換的值，刪除操作的話 item為空
5:校驗:
校驗的是 ref的名字要和 $resf 一樣. 然後在寫事件的是傳入參物件的時候要記得加 '' 不然校驗不了 程式碼按鈕: <el-button type="primary" @click="saveActualBeneficiary('actualBeneficiary')">確 定</el-button> 方法: saveActualBeneficiary(actualBeneficiary) { console.log(this.$refs[actualBeneficiary]); this.$refs[actualBeneficiary].validate((valid) => { if (valid) { if (this.saveOrUpdateFlag === 0) { //新增 this.actualBeneficiarys.push(this.actualBeneficiary); } else { //修改 } this.actualDialogFormVisible = false; } else { return false; } }); }, 如果是時間型別的話,要把rules的校驗規則改為string型別的不然校驗通不過. 錯誤樣式: Error in event handler for "el.form.change": "TypeError: dateObject.getTime is not a function" vue.esm.js?efeb:1687 TypeError: dateObject.getTime is not a function 原因可能是：elementUI自帶的格式轉換後會將繫結值轉為字串，而校驗規則中的【type: 'date'】已經不匹配，至於它的報錯是因為轉換為字串，不是date物件所以沒有getTime這個方法了。
重點修改:
當我們想要修改某個元素時，可以把這個位置上的資料取出來放到彈層裡（或者其他某個位置），在彈層裡的資訊可以取消或者修改後進行儲存。
原文地址：http://www.xiabingbao.com/vue/2017/07/10/vue-curd.html
假設我們彈層裡的資料是selectedlist，那麼每次修改時，把index位置的資料給了selectedlist，然後在彈層中修改selectedlist。我們也能看到修改資料的型別： 文字框（使用者名稱，郵箱），單選按鈕（性別），select選擇框（所在省份），多選框（愛好），這裡我們主要練習的是表單處理（https://cn.vuejs.org/v2/guide/forms.html）。彈層是否顯示用變數isActive來控制：
// 修改資料
modifyData(index) {
this.selected = index; // 修改的位置
this.selectedlist = this.list[index];
this.isActive = true;
}
有沒有發現一個問題，當修改彈層中的資訊時，表格中的資料也同步更新了。可是我們本身是希望當點選儲存按鈕時，才把彈層中的資料儲存到表格裡。問題的根源就出在這裡：
this.selectedlist = this.list[index];
因為list[index]是個Object型別的資料，若使用=賦值，則賦值操作為淺度拷貝（把資料的地址賦值給對應變數，而沒有把具體的資料複製給變數，變數會隨資料值的變化而變化），selectedlist與list[index]使用相同的資料地址，互相引起資料值的變化。因此這裡我們需要進行深度拷貝：
this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先轉換為字串，然後再轉換
當用戶修改資料後，selectedlist就會發生變化，點選儲存按鈕時，將資料重新儲存到index位置：
/*
this.list 資料陣列
this.selected 剛才修改的位置
this.selectedlist 需要儲存的資料
*/
Vue.set(this.list, this.selected, this.selectedlist);7:匯入 import Vue from 'vue'
8:表單提示:
[Element Warn][Form]model is required for validate to work!該提示說的是 form表單需要一個繫結一個 物件(使用:model="" 不能使用v-model=""),
9.表單通過父元件傳值來disabled表單
首先在給表單新增 :disabled="disabledFlag"屬性.
然後接受父元件傳遞過來的標誌位 props: ['disabledFlags'],
然後在給給頁面標識位宣告一個預設值 disabledFlag:false,
把父元件傳過來的值賦值給頁面的標誌位就可以了.
created(){
this.disabledFlag = this.disabledFlags;
},
10.子元件互相傳值
1、兄弟之間傳遞資料需要藉助於事件車，通過事件車的方式傳遞資料
2、建立一個Vue的例項，讓各個兄弟共用同一個事件機制。
3、傳遞資料方，通過一個事件觸發bus.$emit(方法名，傳遞的資料)。
4、接收資料方，通過mounted(){}觸發bus.$on(方法名，function(接收資料的引數){用該元件的資料接收傳遞過來的資料})，此時函式中的this已經發生了改變，可以使用箭頭函式。
步驟:
(1):我們可以建立一個單獨的js檔案eventVue.js,內容如下
import Vue from 'vue'
export default new Vue
(2)首先都要匯入 import bus from "../../components/eventBus.js"
(3):子元件一: var basicsInfo = response.data.basicsInfo; //基本資訊
bus.$emit("basicsInfoData",basicsInfo);
傳送事件資料
(4):子元件二:
直接寫mounted監聽 message就是你傳遞的資料
mounted(){
bus.$on("bankCardInfoData",(message)=>{
console.log("銀行卡資訊賦值");
this.bankCardInfo= message;
})
},
(5):在有的地方this 是undefined 就要用 _this
5、疑問:我可以讓子元件三號傳送一號元件的名字然後給二號元件傳送資料嗎? 待測試.11.給物件動態新增屬性:
bus.$on("modifyFlagData",(message)=>{
console.log("修改標識位");
var modifyFlagArray = message.split('|');
for(var j = 0,len = modifyFlagArray.length; j < len; j++){
_this.modifyFlag[modifyFlagArray[j]]=true;
}
console.log(_this.modifyFlag);
})12. 子元件之間傳值用bus會有多次呼叫的問題.所以更改呼叫方式,使用子傳給父,父在傳給子.子元件用watch監聽資料.
子元件一號是用$emit的形式觸發
this.$emit("templateData", this.assessmentsData);
父元件:
v-on:是子元件觸發的名字 等號後面的是 父元件自己的方法
<query-template v-on:templateData="templateData"></query-template> 使用v-on把事件繫結.
然後在父元件中寫一個templateData 的方法. 括號裡面就是 你從子元件中傳過來的資料.然後把子元件的值賦值給父元件的變數,然後在從父元件 傳給子元件二號
templateData(assessmentsData){
this.assessmentsData= assessmentsData;
}
子元件二號:
在子元件二號的標籤上加上 v-bind:tempalate="assessmentsData" tempalate就是傳遞的變數名字.等號後面就是你要傳遞的變數.
在二號子元件中用prop加上
props: ['tempalate'],
然後在寫一個watch(); watch和method平級 在watch 中要加 deep: true !!!
watch: {
tempalate(val, oldValue) {
debugger;
this.assessmentsData = val;
},
deep: true
},
然後val 就是你傳遞過來的是, oldValue就是之前的值.
用$emit 傳送資料
然後用watch監聽 這樣就能實現子父子的傳遞引數了.
注意:
1.元件傳值的時候 名字要一致.
2.記得watch的時候要寫 deep: true.
13.vue.js 統一關閉頁面的方法:
呼叫傳遞引數:
closeWindow(){
//關閉當前頁面
let view = {};
view.path = '/counter/account/servicecentre/riskassessment';
view.name = '風險測評';
this.baseCloseCurrentPage(view)
}
// 公共方法 關閉當前頁面
baseCloseCurrentPage(view) {
this.$store.dispatch('delVisitedViews', view).then((views) => {
const latestView = views.slice(-1)[0]
if (latestView) {
this.$router.push(latestView.path)
} else {
this.$router.push('/')
}
})
this.$parent.$router.push({path: view.path})
},
delVisitedViews({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_VISITED_VIEWS', view)
resolve([...state.visitedViews])
})
},14.foreach迴圈 陣列本身的索引
forEach方法中的function回撥有三個引數：第一個引數是遍歷的陣列內容，第二個引數是對應的陣列索引，第三個引數是陣列本身.
[].forEach(function(value,index,array){
//code something
});
例子:
var arr = [1,2,3,4];
arr.forEach(function(value,index,array){
array[index] == value; //結果為true
sum+=value;
});
console.log(sum); //結果為 1015.前端解決ajax呼叫非同步的問題.
deleteInfo(node, data){
let queryReq = {};
queryReq.orgNo = data.orgNo;
queryReq.queryTemplate = "role_user";
let urlKey = 'common/query/queryDataList';
this.$store.dispatch('EASYPOST', {
'urlKey': urlKey,
data: queryReq
}).then(response => {
this.rowLength = 0;
this.rowLength = response.data.rows.length;
//在這裡面直接只用 this.rowLength的時候 值獲取的都是上一次的值.
this.confirmTitle(node, data);
}).catch(error => {
this.$message.error(error.message)
})
console.log('length',this.rowLength);
},
//所以就在寫一個方法,讓它繼續執行.在這裡米娜在進行判斷
confirmTitle(node, data){
let title = '';
if (this.rowLength >0){
title = '角色下有'+this.rowLength+'名員工是否確認要刪除?'
}else{
title = '【' + data.label + '】是否確認要刪除?'
}
this.$confirm(title, '刪除', {
type: 'warning'
}).then(() => {
this.deleteTree(node, data)
}).catch(() => {
})
},將呼叫結果巢狀到下一個方法裡面.
16.表單的動態校驗
:validate-on-rule-change="false"17.組織資料
let idList = []
if (this.formParams.datas) {
this.formParams.datas.forEach(item => {
idList.push(item.id)
})
}
let request = {
idList: JSON.stringify(idList),
batchLeaveData: this.batchLeaveData.batchLeaveDatas,
}
前端拼成json字串 --> 後臺用String接受.
然後使用 JSONArray split = JSONArray.parseArray(idList);
轉成jsonArray 遍歷的時候使用 .size
遍歷使用的時候 ,直接用 .toString 或者 .getString 方法.18.前端重置表單
通過refs. 表單的ref屬性名 呼叫resetFields 方法就可以了.
this.$refs.batchLeaveData.resetFields();
用處: 每次進入子元件的時候,表單的資訊還在.