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 中配置