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