vue + element管理後臺

以前沒有用vue+element寫事後臺，前幾天工做須要直接上手，遇到了不少坑，總結一下

 

1. vue修改對象的屬性後頁面的數據沒有刷新

動態修改頁面的屬性不能用點屬性的形式，數據刷新了可是頁面不會從新渲染。動態的修改對象屬性須要使用$set

this.tableData[id].red=true;  //錯誤方式
this.$set(this.tableData[id],"red",true); //正確的方法

2. 表格的多選框的全選

 要實現的功能是在表格的下邊加上全選按鈕，實現全選和取消全選的功能。在el-table標籤上加上 ref="multipleTable"，在操做的時候判斷列表數據是否已經全選中

toggleSelecAll(rows) { if (uuidList.length < this.tableData.length) { rows.forEach(row => { 　　　　this.$refs.multipleTable.toggleRowSelection(row, true); //小於表格的長度就選中 }); } else { rows.forEach(row => { 　this.$refs.multipleTable.toggleRowSelection(row, false); //不然反選 }); } },

3. 單元格里的數據傳參數

element中事件有默認的參數，若是想傳其餘參數能夠在行內寫

:before-upload="((file) => { beforeBaseUpload(file, scope.row.starId)})"  
　　　　　　　　　　//默認參數                    //默認參數和其餘的參數

4. axios 

import axios from 'axios' let baseURL = 'https://*****';  //測試環境
axios.defaults.baseURL = baseURL;

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

@keyup.enter.native   //須要加上native

6. 單頁面儘可能不要刷新頁面

7. 對象根據鍵獲取值

Object.keys(obj).find(k => { return obj[k] == val })

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引入第三方圖標

參考https://www.jianshu.com/p/59dd28f0b9c9 須要在阿里巴巴適量圖標庫裏下載到本地

https://www.jianshu.com/p/8379597e3f97 這個是在線版的，不須要下載到本地。

使用方法

<i  class="el-icon-thirdClose"></i>
 <i  icon="thirdClose"></i>

12. 使用less

由於使用vue-cli搭建的項目，直接安裝便可 npm install -D sass-loader node-sass不用在 webpack 中配置