element-ui 踩坑记（持续更新中）

element-ui小技巧
百度是个好东西，学会自己找解决方法并加以实践保存。
1、当template和formatter不能同时出现时，该怎么办？（仅作为记录使用）

<el-table-column prop="name" label="名称" width="265" show-overflow-tooltip sortable>
    <template slot-scope="scope">
        <span v-html="bs(scope.row)"></span>
    </template>
</el-table-column>

bs(row){
    let a = [];
    a = this.unBrand.filter(item=>item.id == row.i_brand_id);
    if(a.length>0){
        return row.name + "<span class='orderremark2'>（未启用）<span>";
    } else {
        return row.name;
    }
},

参考资料：
https://blog.csdn.net/weixin_...

2、el-select下拉框文本显示内容过长，该怎么办？（仅作为记录使用）
效果图如下：

<el-select v-model="searchData.abnormal_reason" 
    @visible-change="(((val)=>watchEp(val,'expReason','abnormal_reason')))" 
    collapse-tags multiple placeholder="请选择（可多选）"  class="long-select" style="width:234px;" clearable >
    <el-option v-for="(item,index) in expReason" :label="item" :value="item" :key="index" class="long-select" >
    </el-option>
</el-select>
    
.long-select .el-select-dropdown__item {
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    max-width: 234px;
}
.long-select .el-tag--mini {
    height: 20px;
    padding: 0 5px;
    line-height: 19px;
    display: block;
    max-width: 92px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    float: left;
}

操作：

在el-select的两个地方，渲染上加上一个class,然后在样式的最大权限下加上面的css样式重写，即可。

参考文档：（效果与参考文档效果略有不同）

https://www.cnblogs.com/fangnianqin/p/10676698.html

3、在vue里不能检测对象属性的添加或删除问题--这么说可能不是很理解，直接举个我遇到的例子好了；

页面渲染：
<div  class="clearfix" v-for="(ival,i) in ilist[0]">
    <span class="step" style="height:30px;">步骤{{i+1}}</span>
</div>
代码：
data(){
    return {
        ilist: [],
    }
},
created(){
    this.ilist[0] = [{
        id: 'ss';
    }]
},
addDomain(){ //点击事件去增加这个ilist的长度
    this.ilist[0].push({
        id: 'aa'
    });
}

以上你打印出来会发现在，这个ilist的属性没有Observer这个响应属性；所以虽然数组长度有增加，但是实际上页面渲染还是只有一个。
解决办法：
addDomain(){ //点击事件去增加这个ilist的长度
    this.ilist[0].push({
        id: 'aa'
    });
    this.ilist = Object.assign([],this.ilist); //加上这个函数就可以了；
}
附：还有另外一种方案是用this.$set的方案，不知道是不是用错了，所以没有奏效，感觉还是用这个比较好。

参考资料：

https://cn.vuejs.org/v2/guide/list.html#对象变更检测注意事项
https://blog.csdn.net/qq_37285177/article/details/78935831

打印实现原理：
一般来说都是直接用window.print();

但是需求是要实现网页的一部分打印，且页面很长等等问题，所以就要考虑到打印的时候能否分页问题。这个就是把要打印的内容写入画布->然后生成图片->页面实现打印

打印代码：（吐槽一下，太难了，真的是累死人了都要，这个变态的额需求）
`<div id="div">

打印的内容

</div>`

function printClick(){ //打印

html2canvas(document.querySelector("#div"),{
    background: '#fff',
    timeout: 0
}).then(canvas => {
    var dataUrl = canvas.toDataURL();
    var newImg = document.createElement("img");//创建img对象
    newImg.setAttribute('width',1400)
    newImg.src = dataUrl;
    newImg.onload = () => { //图片加载成功后，再执行打印
        var obj = newImg;
        var newWindow=window.open(location.href,"_blank");//打印窗口要换成页面的url
        var docStr = obj.outerHTML;
        newWindow.document.write(docStr);
        newWindow.document.close();
        newWindow.print();
        newWindow.close();
    }
    
});

}
效果：

参考文档：
https://blog.csdn.net/The_Thi...
https://blog.csdn.net/baidu_2...
https://blog.csdn.net/foren_w...
https://developer.mozilla.org...
https://blog.csdn.net/weixin_...
https://blog.csdn.net/Roger_C...

表头添加select 样式出现问题(有对比才可以看出问题，可怕可怕~~~~)

解决方案：（.table-youknow为在表格上加的class）

`/ --start 表头添加select 下拉框样式问题 /
（） .el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {

padding-left: 0px;

}

.table-youknow .el-table .cell, .el-table th div {

padding-right: 0px;
overflow: hidden;
text-overflow: ellipsis;

}
/ --end 表头添加select 下拉框样式问题 /`