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