說明：很久沒有開發過后臺管理系統，elementui都好久沒有用過了，踩了一些小坑，特意記錄下：
element 特點：a.組件的一般輸入的值/可以選擇的值，都是綁定在v-model 上面
b. 在組件上面綁定值，一般來說需要 :屬性名=屬性值 ，這個寫法
c. 在組件上面設置 style=“width: 300px” 可以直接修改組件的寬度

1. input 組件–輸入框 ，防止用戶輸入空格-在v-model 后面加上 .trim：

<el-form-item label="任務名稱"><el-input v-model.trim="allData.taskName" placeholder="請輸入"></el-input></el-form-item>

input 輸入框 ，只能輸入數字

oninput="value=value.replace(/[^\d]/g,'')" // 只能輸入數組并且限制最大長度oninput="value=value.replace(/[^\d]/g,'');if(value.length>4)value=value.slice(0,4)"

功能代碼示意–注意設置這個， 這個只能設置value屬性名，否則該功能不會生效，然后還需要在data(){}里面設置 value:''

v-model.trim="dialogData.autoSendMessageTaskDO.inputSendTime"placeholder="請輸入"maxlength="5"oninput="value=value.replace(/[^\d]/g,'')"style="display: inline-block; width: 100px"

補充修改input組件樣式：

做法：給直接父盒子一個類名，

<!-- 描述 --><div class="describe"><el-input v-model="item.desc" class="nickname" placeholder="請輸入內容"></el-input></div>

然后樣式代碼如下：

// describe這個是直接父盒子的類名（需要根據自己設置的盒子類名來設置）， 后面一節不用管input.el-input__inner 直接復制就好。/deep/ .describe input.el-input__inner {height: 20px;font-size: 12px;vertical-align: bottom;text-align: left;border: none;padding-left: 0;margin-top: 2px;font-size: 16px;}

2.select選擇器：需求功能： 多選-搜索-根據搜索的關鍵詞，將符合條件的內容篩選出來(本地搜索)：

// filterable - 搜索功能 // multiple- 多選功能 el-option標簽-選擇內容,設置可以選擇的內容, 還支持change 事件，當用戶選中時觸發 // 選中的value值，label是展示給用戶看的，實際選中的值是 value<el-selectv-model.trim="profilePlatformUid"filterable:reserve-keyword="true"placeholder="請輸入,可多選"style="width: 300px"multiple@change="profilePlatformUidChange"><el-optionv-for="(item, index) in enterpriseList":key="index":label="item.label":value="item.value"></el-option></el-select>

有時候要獲取后臺數據，對數據進行拼接，再生成列表給用戶選中，這樣其實可以直接再label標簽上，進行拼接。不用進行其他處理，代碼如下：

// 后臺這里返回的是一個數組，里面是對象，對象里面有兩個屬性courseName courseId ， 要把他們拼接起來，可以直接像下面這樣寫。<el-optionv-for="item in enterpriseList":key="item.courseId":label="`課程名稱：${item.courseName} / 課程ID: ${item.courseId}`":value="item.courseId"></el-option>

3. 組件el-dialog-卡片，一般用來設置彈出層：

visible- 控制卡片是否展示渲染的開關-布爾值 before-close -這是點擊卡片右上角的關閉按鈕觸發的事件<el-dialogtitle="xxxx"width="50%":visible.sync="isVoluntarilyFlag":before-close="handleClose":close-on-click-modal="false"></el-dialog>

4. 解決el-form標簽內 label中的字體過多掉落下來，不在同一行顯示問題，禁止修改功能：

// disabled - 禁止修改，設置后此表單內容的所有內容只能用于展示，不能修改-接受布爾值 // 注意： form表單校驗只會校驗 model綁定的對象內的屬性值，比如這里他就只會校驗autoSendMessageTaskDO這個對象中的屬性值，非autoSendMessageTaskDO這個對象中的屬性值，不予校驗。 // rules --設置校驗規則- 類型：對象，設置在`data(){}`里面 // style="white-space: nowrap" 解決lable 標簽字過多掉下來問題 // label-width="100px" 修改 label 寬度 <el-form:disabled="disabledp"ref="Form"size="small":model="dialogData.autoSendMessageTaskDO"inline:rules="rules"label-width="100px"style="white-space: nowrap">// 校驗規則--可以支持自定規則rules: {value1: [{ required: true, message: '開始日期和結束日期為必選項', trigger: 'change' }],taskName: [{ required: true, message: '請輸入任務名稱', trigger: 'blur' },{ min: 1, max: 20, message: '長度在 1 到 20 個字符', trigger: 'blur' },],}

5.form表單校驗:

說明： prop綁定的屬性，不是 form表單標簽上面綁定的屬性的屬性值，一直觸發校驗，也不會報錯，截圖上面字打錯了，是一直會觸發校驗。
表單中 v-if 已經隱藏了的項，是不會觸發校驗的。

清空表單校驗產生的校驗消息：
this.$nextTick(() => { this.$refs.Form.clearValidate(); // 清空表單校驗 });–這個是清除整個表單產生的校驗消息
清除表單中單個項的校驗信息：

功能代碼：
form 為 表單標簽上面設置的 ref屬性
fields 不用管他，不要修改就這樣
content是 prop 屬性綁定的屬性名， --這個就是具體清除那個項產生的校驗信息

const _field = this.$refs.Form.fields;_field.forEach((i) => {if (i.prop === 'content') {i.resetField();}});// 其實就是獲取整個表單綁定的具體值，比如這里表單里面 有一個輸入框綁定的值是，content 屬性， 我要單獨清空這個項的校驗信息， 先獲取該表單所有綁定的值，判斷是否是需要清空校驗的項，再來清空校驗規則。

6.時間日期選擇器el-date-picker

帶顏色部分是過去時間，不能被選中

// 1. 選中的時間會以數組形式存儲在 v-model綁定的屬性中，第一項是，開始時間，第二項是結束時間 // 2. change事件觸發時機是在用戶選擇完開始結束時間后，點擊確認按鈕觸發。 // 3. type="datetimerange" 設置時間日期選擇器的類型 // 4. format="yyyy-MM-dd HH:mm:ss" 自定義選中后展示在界面給用戶看的-時間日期格式 // 5. value-format="timestamp" 設置選中后返回的時間格式-時間戳-類型為number， // 6. reserve-keyword 多選且可搜索時，是否在選中一個選項后保留當前的搜索關鍵詞 // 7. :picker-options="pickerOptions" - 這綁定的是事件-作用：使用戶無法選中已經過去的時間，只能選擇當日和未來時間 // 選中后返回的時間為—— [185444557,554785522]<el-form-item label="xxx:" prop="value1" class="uu"><el-date-pickerv-model="dialogData.autoSendMessageTaskDO.value1"@change="startEndTime":clearable="false"type="datetimerange"range-separator="至"start-placeholder="開始日期"end-placeholder="結束日期"format="yyyy-MM-dd HH:mm:ss"value-format="timestamp":picker-options="pickerOptions"></el-date-picker></el-form-item>// 禁止選擇已過去時間pickerOptions: {// 選擇處理時間disabledDate(time) {return time.getTime() < Date.now() - 3600 * 1000 * 24;},}

將標準格式時間轉換為時間戳：
標準時間格式：2021-01-11T16:22:28.000+0000

const time =new Date(這里放置要轉換的時間).getTime();

7. input輸入框設置最大最小輸入長度：

// show-word-limit 是否顯示字數統計// maxlength="20" -最大字數// minlength="1" -最小字數<el-form-item label="任務名稱:" prop="taskName"><el-inputv-model.trim="dialogData.autoSendMessageTaskDO.taskName"placeholder="請輸入"maxlength="20"minlength="1"show-word-limitstyle="width: 300px"></el-input></el-form-item>

8.el-radio 單選：

示意圖：

// 1. :label -- 就是代表這個單選選中的值-數字類型， // 2. 支持change事件，當用戶選中時觸發 // 3. 也是 v-model 綁定的值，來決定是否選中<el-form-item label="消息類型:" prop="messageType"><el-radio-group v-model="dialogData.autoSendMessageTaskDO.messageType"><el-radio :label="1" @change="remove(1)">文本</el-radio><el-radio :label="3" @change="remove(3)">圖片</el-radio><el-radio :label="19" @change="remove(19)">文件</el-radio></el-radio-group></el-form-item>

9. el-upload文件上傳：傳送門上傳文件代碼

10. 解決select 選擇器 input輸入框 、時間日期選擇器el-date-picker 賦值后，出現無法修改選中更改問題： 傳送門：賦值后出現無法選中修改操作解決辦法

11. 數據處理： 直接將后臺返回數據的屬性名修改成自己需要的屬性名：

list - 為需要處理的數據體
value label: 是想要需要的屬性名
item.nichname 是上面需要被修改屬性名

const list007 = list.map((item) => {return {value: item.platformUid,label: item.nickname,};});

12.數據已經修改了但是視圖沒有更新：

本次我遇到的是 修改數組中某個對象中的某一個屬性，數據已經修改成功了，但是視圖卻沒有修改成功。
解決辦法使用this.$set，來修改數據，這樣才會觸發視圖更新。
比如要修改：allCard數組中，某項（對象）中的某個屬性值：

allCard: [{iconUrl: '', title: '請添加名稱', desc: '請用一句話描述',thumburl:'xxxx', pagepath: '', remark: 'xxx', // 備注isSelectAppletCard:false},{iconUrl: 'xxxx', title: '請添加名稱', desc: '請用一句話描述', thumburl: '', pagepath: '', isSelectAppletCard:false}] // this.allCard --為要修改的對象 val為修改數組中對象的索引值 { ...this.allCard[val] } 是要修改對象所有數據的數據this.allCard[val].isSelectAppletCard = true; // 這里是對要修改數組中對象的某個屬性，進行修改this.$set(this.allCard, val, { ...this.allCard[val] }); // 把修改后的該對象，重新用this.$set修改下，這樣就會觸發視圖更新。

el-dialog 彈窗居中

/deep/ .el-dialog {display: flex;flex-direction: column;margin: 0 !important;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-height: calc(100% - 30px);max-width: calc(100% - 30px); }/deep/ .el-dialog .el-dialog__body {flex: 1;overflow: auto; }

修改 input 相關的組件樣式 —設置input高度，里面箭頭位置大小 ， 寬度隨便寫個行內樣式就能改動

在組件上加上 class="inputClass" // .inputClass{/deep/ .el-input__inner {height: 28px;line-height: 28px;font-size: 12px;}/deep/ .el-select__caret {height: 28px;line-height: 28px;}/deep/.el-input__inner {padding-left: 5px;padding-right: 18px;}/deep/.el-input__suffix {right: -1px;}/deep/ .el-select__caret {font-size: 12px;}}

以后遇到的數據處理都會放在這個鏈接中傳送門
.

總結

以上是生活随笔為你收集整理的element ui 组件踩坑记录--后台管理系统-最全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。