vue element管理後台

2022-08-28 16:15:24 字數 1650 閱讀 9047

之前沒有用vue+element寫過後台,前幾天工作需要直接上手,遇到了很多坑,總結一下

動態修改頁面的屬性不能用點屬性的形式,資料重新整理了但是頁面不會重新渲染。動態的修改物件屬性需要使用$set

this.tabledata[id].red=true;  //錯誤方式

this.$set(this.tabledata[id],"red",true); //正確的方法

2. **的多選框的全選

要實現的功能是在**的下邊加上全選按鈕,實現全選和取消全選的功能。在el-table標籤上加上 ref="multipletable",在操作的時候判斷列表資料是否已經全選中

toggleselecall(rows) );

} else

); }

},

3. 單元格裡的資料傳引數

element中事件有預設的引數,如果想傳其他引數可以在行內寫

:before-upload="((file) => )"  

//預設引數 //預設引數和其他的引數

測試環境

axios.defaults.baseurl = baseurl;

5. elemnt ui的輸入框回車事件

@keyup.enter.native   //需要加上native
6. 單頁面盡量不要重新整理頁面

7. 物件根據鍵獲取值

object.keys(obj).find(k =>)
8. 2個陣列相互匹配

有乙個陣列arr1是資訊列表,裡邊每一項都有id值

然後有乙個id的陣列arr2,用arr2去匹配arr1中對應的項

arr1.filter(t => !arr2 .some(s => s === t.id))
9. a標籤去掉點選態

-webkit-tap-highlight-color: rgba(0,0,0,0);
10. 設定快取

基本資料型別的話  localstorage.a =123

物件儲存 (需要進行序列化和反序列化)

//

設定快取

const parsed = json.stringify(this

.cats);

localstorage.setitem('cats', parsed);

//獲取快取

this.cats = json.parse(localstorage.getitem('cats'));

11. element引入第三方圖示

使用方法

12. 使用less

因為使用vue-cli搭建的專案,直接安裝即可 npm install -d sass-loader node-sass

不用在 webpack 中配置

vue element後台管理系統登入

驗證方法element上有介紹 在el form裡加上 rules rules ref ruleform 在el form item裡定義prop prop name 1 在data return裡定義rules data,2 在el form item 直接定義 rules 提交時的驗證 要把fo...

vue element管理後台的麵包屑

index.js裡面這樣寫 顯示的元件中寫 校園管理 data中寫 data methods中寫 麵包屑 getbreadcrumb 監聽和mounted watch mounted 下面這個是因為我加了乙個圖示。可以忽略 breadtop如果還有隱藏的麵包屑,我在網上沒找到辦法,然後就自己想了個特...

VUE element開發後台管理的搜尋功能

先看看樣式圖 實現上面這種簡單搜尋簡單的三步走 1.頁面樣式 在頁面中使用form表單的校驗功能來實現輸入搜尋。給表單的資料放入搜尋請求的data陣列中,也就是searchparams這個大集合中。備註 如果給每個輸入框新增了搜尋按鈕的click方法,則會在輸入完成後直接執行列表搜尋。所以考慮自己使...