elementui 使用過程一些細節
-
搜索框重置，沒有清除問題
<el-form-item label="簽約人" prop="signatories"> <el-input v-model="queryParams.signatories" placeholder="簽約人" clearable size="small" @keyup.enter.native="handleQuery" style="width:240px" /> </el-form-item>是因爲 prop="signatories" 沒有設置或者設置與對應的輸入框不一樣導致
-
彈窗必填提示不顯示* 。
<el-form-item label="撤回原因" prop="reason"> <el-input v-model="withdrawalForm.reason" type="textarea" rows="5" maxlength="200" show-word-limit/> </el-form-item>一可能是沒有設置 prop="reason"，二是設置與輸入框不一致，三對應的如rules規則沒有設置對應的值
-
彈窗數據沒有重新加載問題
<!-- 添加或修改區域政策對話框 :fullscreen='true' --> <el-dialog :title="title" :visible.sync="open" v-if="open" width="1250px" append-to-body custom-class="chy-dialog" >對話框增加一個 v-if="open" 即可
-
數據深度拷貝方法
-
下載文件操作
<div style="width: 100%" v-if="upload.isConsume"> 消耗導入的文件必須是xls或xlsx格式，<span style="color: #409eff" @click="excelTemplatesConsume" > 點擊下載 </span> <a ref="downloadTemplateConsume" style="display: none" href="/excelTemplate/templatesConsume.xlsx" target="_blank"> </a> 示例以幫助您順利地完成導入 </div>js代碼
excelTemplatesConsume() { this.$refs.downloadTemplateConsume.dispatchEvent(new MouseEvent('click')) },如果是鏈接的操作方法
window.open(file[index].url, '_blank') window.open( "http://xxxxx.myqcloud.com/1650676904624.xlsx" ); -
頁面元素不固定實現
參考鏈接：https://www.cnblogs.com/xiaohuasan/p/16130317.html
主要代碼是這裏
.chy-test:last-of-type { //這個纔是取同類最後一個 https://www.csdn.net/tags/NtjaYgxsMjAyNTMtYmxvZwO0O0OO0O0O.html
margin-right: calc(26% + 22% / 2);
}
.chy-test:nth-child(3n) { //第3個和3n元素的處理
margin-right: 0;
}
-
字符串拼接
<template v-if="userList"> <div v-for="(item,index) in userList" :key="index"> {{item.userName+'('+item.userAccount+')'}} </div> </template> <el-option v-for="item in projectList" :key="item.pNo" :label='`${item.name}-${item.managerName}(${item.managerAccount})`' :value="item.pNo" > </el-option>this.personList.forEach(item => { item.label = `${item.userName}(${item.account})`; }); :ref="`user${index}`" -
數據更新
this.$nextTick(() => { this.$set(this.$refs.chyEdit[this.tempData.index].goalForm.addQuotaDetailManageList, this.tempData.inIndex, this.formAttribute); }) -
子組件刷新父組件 和父組件調用子組件方法
子組件刷新父組件可以使用多層$parent，從而達到刷新或關閉或改變父級或頂級窗體相關屬性
當在子組件裏更改了某些信息且關閉子組件後，需要父組件更新修改後的內容，該如何操作
1、$emit觸發
父組件 @add=“add(val)”
子組件 this.$emit('add', newVal)
2、使用$parent觸發
父組件 更新數據是由某個方法觸發，如getList()
子組件 this.$parent.getList()
this.$refs.commonForm.$children[0].saveToDb()//保存子組件數據 -
自定義字段是數組或對象的注意的事項
是數組設置
props: { cluesList: { type: Array, default: ()=>[], }, },是對象的設置
props: { goalObject: { //每個目標信息 type: Object, default: () => {}, }, }, -
這個操作注意一下，看清楚，一個有return，一個沒有，所以導致then數量不同
handleRevokeTest(row) { let that=this; this.loading=true; //撤銷內容 this.$confirm("確認撤銷此工單的申請嗎？", "提示", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning", }) .then(() => { new Promise((resolve,reject)=>{ resolve("執行") }).then((val)=>{ console.log(val,"valvalvalvalval") this.loading=false; }) }) .catch(() => { this.loading = false; }); console.log(this.loading,"this.loading") }, openConfirm(roleId) { let that = this; this.$confirm("確認回收後，無法更改，確認已收到對應配件嗎？", "警告", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning", }) .then(function () { return confirmAccessories(roleId); }) .then(() => { that.msgSuccess("成功"); that.getFormInfo(); that.getDisposeRecordList(); }) .catch(function () { //this.msgSuccess("成功"); // this.loading = false;是否 }); }, -
js兩個數組方法 filter和find
ES6 find() 方法返回通過測試函數的第一個元素的值。如果沒有值滿足測試函數，則返回 undefined。
filter() 方法創建一個包含所有通過測試函數的元素的新數組。如果沒有元素滿足測試函數，則返回一個空數組。
showStateText(value) { let tempData = this.stateOptions.filter((item) => item.id == value); return tempData &&tempData.length>0&& tempData[0].lable || '未知' }, showUseObjText(value) { let tempData = this.useObjOptions.find((item) => item.id == value); return tempData && tempData.lable || '未知類型' },參考鏈接：https://blog.csdn.net/qfxietian/article/details/122219437
-
css 背景圖片
<div :class="showBg(state)"> </div><style scoped> .chy-bg-reject { background: url("~@/assets/chyimages/reject.png") no-repeat; background-position: 100% 0%; background-size: 200px 200px; } .chy-bg-revoke { background: url("~@/assets/chyimages/revoke.png") no-repeat; background-position: 100% 0%; background-size: 200px 200px; } .chy-bg-approved { background: url("~@/assets/chyimages/approved.png") no-repeat; background-position: 100% 0%; background-size: 200px 200px; } </style>showBg(state) { let bgClass = ''; if (state == '3') { bgClass = 'chy-bg-approved' } else if (state == '4') { bgClass = 'chy-bg-reject' } else if (state == '5') { bgClass = 'chy-bg-revoke' } else { bgClass = ''; } return bgClass; }