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