作者:金裕麟雯茂俊佑 | 来源:互联网 | 2023-08-15 17:43
element-ui小技巧百度是个好东西,学会自己找解决方法并加以实践保存。1、当template和formatter不能同时出现时,该怎么办?(仅作为记录使用)
element-ui小技巧
百度是个好东西,学会自己找解决方法并加以实践保存。
1、当template和formatter不能同时出现时,该怎么办?(仅作为记录使用)
bs(row){
let a = [];
a = this.unBrand.filter(item=>item.id == row.i_brand_id);
if(a.length>0){
return row.name + "
参考资料:
https://blog.csdn.net/weixin_…
2、el-select下拉框文本显示内容过长,该怎么办?(仅作为记录使用)
效果图如下:
@visible-change="(((val)=>watchEp(val,'expReason','abnormal_reason')))"
collapse-tags multiple placeholder="请选择(可多选)" class="long-select" clearable >
.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里不能检测对象属性的添加或删除问题–这么说可能不是很理解,直接举个我遇到的例子好了;
页面渲染:
步骤{{i+1}}
代码:
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