热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

elementui踩坑记

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 + "(未启用)";
} else {
return row.name;
}
},

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

2、el-select下拉框文本显示内容过长,该怎么办?(仅作为记录使用)
效果图如下:

《element-ui 踩坑记》

@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'
});
}

《element-ui 踩坑记》

以上你打印出来会发现在,这个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

推荐阅读
  • 技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
  • 计算机视觉领域介绍 | 自然语言驱动的跨模态行人重识别前沿技术综述(上篇)
    本文介绍了计算机视觉领域的最新进展,特别是自然语言驱动的跨模态行人重识别技术。上篇内容详细探讨了该领域的基础理论、关键技术及当前的研究热点,为读者提供了全面的概述。 ... [详细]
  • PTArchiver工作原理详解与应用分析
    PTArchiver工作原理及其应用分析本文详细解析了PTArchiver的工作机制,探讨了其在数据归档和管理中的应用。PTArchiver通过高效的压缩算法和灵活的存储策略,实现了对大规模数据的高效管理和长期保存。文章还介绍了其在企业级数据备份、历史数据迁移等场景中的实际应用案例,为用户提供了实用的操作建议和技术支持。 ... [详细]
  • 在使用 Cacti 进行监控时,发现已运行的转码机未产生流量,导致 Cacti 监控界面显示该转码机处于宕机状态。进一步检查 Cacti 日志,发现数据库中存在 SQL 查询失败的问题,错误代码为 145。此问题可能是由于数据库表损坏或索引失效所致,建议对相关表进行修复操作以恢复监控功能。 ... [详细]
  • 如何在C#中配置组合框的背景颜色? ... [详细]
  • 本文详细介绍了 InfluxDB、collectd 和 Grafana 的安装与配置流程。首先,按照启动顺序依次安装并配置 InfluxDB、collectd 和 Grafana。InfluxDB 作为时序数据库,用于存储时间序列数据;collectd 负责数据的采集与传输;Grafana 则用于数据的可视化展示。文中提供了 collectd 的官方文档链接,便于用户参考和进一步了解其配置选项。通过本指南,读者可以轻松搭建一个高效的数据监控系统。 ... [详细]
  • 如何在Linux服务器上配置MySQL和Tomcat的开机自动启动
    在Linux服务器上部署Web项目时,通常需要确保MySQL和Tomcat服务能够随系统启动而自动运行。本文将详细介绍如何在Linux环境中配置MySQL和Tomcat的开机自启动,以确保服务的稳定性和可靠性。通过合理的配置,可以有效避免因服务未启动而导致的项目故障。 ... [详细]
  • 本文详细介绍了在MySQL中如何高效利用EXPLAIN命令进行查询优化。通过实例解析和步骤说明,文章旨在帮助读者深入理解EXPLAIN命令的工作原理及其在性能调优中的应用,内容通俗易懂且结构清晰,适合各水平的数据库管理员和技术人员参考学习。 ... [详细]
  • 【问题】在Android开发中,当为EditText添加TextWatcher并实现onTextChanged方法时,会遇到一个问题:即使只对EditText进行一次修改(例如使用删除键删除一个字符),该方法也会被频繁触发。这不仅影响性能,还可能导致逻辑错误。本文将探讨这一问题的原因,并提供有效的解决方案,包括使用Handler或计时器来限制方法的调用频率,以及通过自定义TextWatcher来优化事件处理,从而提高应用的稳定性和用户体验。 ... [详细]
  • 在 Vue 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • 使用 Vuex 管理表单状态:当输入框失去焦点时自动恢复初始值 ... [详细]
  • 在Django中提交表单时遇到值错误问题如何解决?
    在Django项目中,当用户提交包含多个选择目标的表单时,可能会遇到值错误问题。本文将探讨如何通过优化表单处理逻辑和验证机制来有效解决这一问题,确保表单数据的准确性和完整性。 ... [详细]
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
  • ButterKnife 是一款用于 Android 开发的注解库,主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法,包括如何通过注解实现字段和方法的绑定,以及在实际项目中的应用示例。此外,文章还提到了截至 2016 年 4 月 29 日,ButterKnife 的最新版本为 8.0.1,为开发者提供了最新的功能和性能优化。 ... [详细]
  • DRF框架中Serializer反序列化验证机制详解:深入探讨Validators的应用与优化
    在DRF框架的反序列化验证机制中,除了基本的字段类型和长度校验外,还常常需要进行更为复杂的条件限制校验。通过引入`validators`模块,可以实现自定义校验逻辑,如唯一字段校验等。本文将详细探讨`validators`的使用方法及其优化策略,帮助开发者更好地理解和应用这一重要功能。 ... [详细]
author-avatar
金裕麟雯茂俊佑
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有