el-table的表头居中、es6的对象数组的reduce回调去重等VUE技巧(如若有误,望指正)

  • 表头居中
<el-table-column
header-align="center"
>
</el-table-column>

elementui官网

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: '发发发'}]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值