- 表头居中
<el-table-column
header-align="center"
>
</el-table-column>
header-align 表头对齐方式,若不设置该项,则使用表格的对齐方式 String left/center/right
- this.$message 提示不存在
import {Message} from ‘element-ui’;
/* 引用 */
Message({
showClose: true,
type: ‘warning’,
message: “我是警告”
});
- js的多层对象
如下,address属性也是用花括号括起来,也是对象,就构成了多层
let person = {
name: '小明',
age: '18',
address: {
province: '广东',
city: '东莞',
area: '南城区'
}
}
- es6的数组的排序
我们的 vue 下拉框绑定的数组,每次进行操作之前,最好排序一下,防止目前是同样的两个选项,因为点击顺序不同而可能影响生成的值。
let arr = [40,8,10,5,79,3]
let arr2 = arr.sort((a,b) => a - b)
console.log(arr2) // [3,5,8,10,40,79]
let arr3 = arr.sort((a,b) => b - a)
console.log(arr3) // [79,40,10,8,5,3]
- elementui项目的的一些操作总结;
1. 如果有弹窗组件作为子组件,使用this.$set方法赋值
2. 表单多选
<el-form-item label="无">
<el-select
v-model="obj.dataArr"
:multiple="true"
:collapse-tags="true"
filterable
clearable
placeholder="请选择"
>
<el-option
v-for="(item, index) in dataArr"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
3. 然后数组需要排序;arr.sort()
4. 后端的foreach="str.split('|')" 使用| ,mybatis不判断有没有'|',则会拆分全部文字为单个文字;
5. 下拉框都放进字典里面维护
6. 最主要的是数组的操作,比如赋值,去重,排序等等,要在this.service.then(res=>{})里面,否者打印都是[],甚至操作无效,
- es6的对象数组的reduce回调去重
数组
arr = [{price: 888, content: '发发发'},
{price: 999, content: '长长久久'},
{price: 888, content: '发发发'},
{price: 666, content: '溜溜大顺'}]
方法1(推荐)
let obj = {};
this.arr = this.arr.reduce((cur, next) => {
// true && cur.push(next)惰性求值?--如果最后一个表达式为非false,那么直接返回这个表达式的结果,反之直接是false
obj[next.id] ? "" : (obj[next.id] = true && cur.push(next));
return cur;
},[]) //设置cur默认类型为数组,并且初始值为空的数组
方法2(不推荐,遍历太多)
this.arr = this.arr.reduce((diffArr, item) => {
if (diffArr.find(v => v.value = item.value && v.label === item.label)) {
} else {
diffArr.push(item);
}
return diffArr;
}, []);
结果
arr = [{price: 888, content: '发发发'},
{price: 999, content: '长长久久'},
{price: 888, content: '发发发'}]