工作总结#3

Vue 

 

this.$nextTick方法：在修改数据之后立即使用这个方法，获取更新后的 DOM，无需二次刷新

this.$nextTick(() => {})

 :visible指的是属性绑定，表示弹框的显示隐藏，sync:同步动态双向的来表示visible的值

<el-dialog
    :visible.sync="dialogVisible" 
>
</el-dialog>

delete只是将被删除的元素变成了 empty/undefined 其他的元素的键值、数组的长度还是不变

delete par.uname;

利用Vue来实现点击增加div操作

使用数组的方式

<div class="articleProject" v-for="(item,index) in items" :key="index">
    <el-select v-model="value" placeholder="请选择系统类型" class="detailedName">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <el-select v-model="value_goods" placeholder="请选择商品类型" class="detailedName">
        <el-option v-for="item in options_goods" :key="item.value_goods" :label="item.label" :value="item.value_goods">
        </el-option>
    </el-select>
    <el-input placeholder="请输入商品名称" class="detailedName" v-model="commodityName" clearable></el-input>
    <el-input placeholder="请输入型号规格" class="detailedName" v-model="specifications" clearable></el-input>
    <el-input placeholder="请输入参考数量" class="detailedName" v-model="referenceNumber" clearable></el-input>
    <el-input placeholder="请输入单位" class="detailedName" v-model="unit" clearable></el-input>
    <el-input placeholder="请输入单价" class="detailedName" v-model="unitPrice" clearable></el-input>
    <el-input placeholder="备注" class="detailedName" v-model="note" clearable></el-input>
    <el-button icon="el-icon-delete" class="detailedName" plain @click="deletRow()"></el-button>
</div>
<!-- 新增按钮 -->
<div class="addNew">
    <el-button icon="el-icon-plus" plain class="addBtn" @click="addRow()">新增商品</el-button>
</div>

data() {
		return {
            items: [],
			text: 0,
        }
},
methods: {
		// 删除行
		deletRow(){
			// 利用数组方法
			this.items.pop(this.text)
		},
		// 增加行
		addRow(){
			// 利用数组方法
			this.items.push(this.text++)
		},
},

JavaScript

Object.assign() 的用法

该方法用于将所有可枚举属性的值从一个或多个源对象（sources）分配到目标对象（target），并返回目标对象。

Object.assign(target, ...sources)

 一、对象的拷贝

const target = { a: 1, b: 2 };
const source1 = { b: 4, c: 5 };
const source2 = { b: 6, c: 7 };
const obj = Object.assign(target,source1,source2);
console.log(obj); // (a: 1, b: 6, c: 7)

注意：
1、源对象属性与目标对象属性不同，则会被拷贝到目标对象中；
2、如果目标对象和源对象有相同的属性，目标对象的属性值会被源对象的属性值覆盖掉；
3、如果有多个源对象有相同的属性，那么目标对象的属性将会被最后一个源对象属性覆盖。

 二、继承属性和不可枚举属性不能拷贝

const obj1 = Object.create({foo: 1}, { // foo 是个继承属性。
    bar: {
        value: 2  // bar 是个不可枚举属性。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是个自身可枚举属性。
    }
});
const obj= Object.assign({}, obj1);
console.log(obj); // { baz: 3 }
//创建对象时，如果没有设置enumerable的值，默认为false（不可枚举属性），设置为true，则为可枚举属性

 注意：Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象，继承的和不可枚举的属性不会拷贝。

CSS

/deep/ 样式穿透，可以使用在elementui里，使用后可以修改ui样式

/deep/ .el-input__inner {
    border: none;
}