vue+elementUI常用代码片段--持续更

1.element-UI树形结构替换节点图标

2.el-date-picker在现有时间的基础上增加5年

3.判断当前对象是否为空（常用的三种方法）

4.修改el-select下拉框的样式

 

1.element-UI树形结构替换节点图标

            

/*有子节点，但是未展开*/
.el-tree /deep/ .el-icon-caret-right:before {
    background: url('~@/assets/images/securityManage/folder.png') no-repeat 0 3px;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
}

/*有子节点，并且已经展开*/
.el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url('~@/assets/images/securityManage/folder_open.png') no-repeat 0 3px;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
}

/*没有子节点，就是一个文件*/
.el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
    background: url('~@/assets/images/securityManage/file.png') no-repeat 0 3px;
    content: '';
    display: block;
    width: 16px;
    height: 21px;
    font-size: 16px;
    background-size: 16px;
}

 2.el-date-picker在现有时间的基础上增加5年

 确定当前时间后，下次时间在当前时间的基础上增加5年

<el-date-picker v-model="form.time" type="datetime" placeholder="选择****时间" @change="changeTime"> </el-date-picker>
<el-date-picker v-model="form.nextTime" type="datetime" placeholder="选择下次****时间"> </el-date-picker>

changeTime(val) {
    let time = new Date()
    time.setFullYear(val.getFullYear() + 5)
    time.setMonth(val.getMonth())
    time.setDate(val.getDate())
    time.setHours(val.getHours())
    time.setMinutes(val.getMinutes())
    time.setSeconds(val.getSeconds())
    this.$set(this.form, 'nextTime', time)
}

3.判断当前对象是否为空（常用的三种方法）

let obj = {};
console.log(JSON.stringify(obj) === "{}");//将对象转换成字符串，为空，返回true

console.log(Object.keys(obj).length == 0);//将对象的属性名组成数组，数组长度为0，为空，返回true ES6写法

let result = function (obj) {
  for (let key in obj) {
    return false;//表示对象可遍历，不为空，返回 false
  }
  return true;
}
console.log(result(obj));//返回true

4.修改el-select下拉框的样式

<el-select v-model="showObj.description" popper-class="type pop-all" placeholder="请选择" clearable class="con_select" :popper-append-to-body="false">
    <el-option v-for="item int typeOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>

/deep/.con_select {
    .el-input,
    .el-input--small,
    .el-input--suffix {
        .el-input__inner {
            // border: none !important;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background-color: rgba(0, 0, 0, 0.5);
            width: 170px;
                padding-left: 0;
            color: #fff !important;
        }
    }
}
:deep().el-select .el-input .el-select__caret {
    color: #fff !important;
}

// 修改el-select的样式 最外层

/deep/ .pop-all {

    .el-select-dropdown__item {

        color: #fff;

    }

    .el-select-dropdown__item.hover,

    .el-select-dropdown__item:hover {

        color: #fff;

        background: rgb(14, 98, 111);

    }

}

/deep/ .type {

    background-color: #096163;

    color: #fff;

    overflow: hidden;

    position: absolute !important;

    margin-top: 4px;

    border: 0px;

    top: 32px;

    left: 10px;

}