伤脑筋的版本升级

element-ui升级到2.0版本了!

element-ui作为比较成熟的广为人知的前端框架,原本满怀热情的去学习,也基于element-ui搭建出了一套系统,可是它居然升级了!

别的技术升级都是兼容旧版本,可是它升级后我所有的日期控件全部瘫痪。。。

别的技术升级后都是保留原有index.css或index.js官方链接,它居然连旧版本的css链接都废弃了!等于样式全部废弃!这对于商用系统怎么接受的了。。。

由于日期控件全部瘫痪,css链接被废弃,所以我现在要面临的是重测系统!

所以别的技术升级我是高兴,比如spring,但是element-ui升级后,我却一点儿也高兴不起来,因为我要重测我整个系统!

日期控件瘫痪表现

这是element-ui 1.0版本的日期控件代码:

<el-date-picker v-model="searchForm.fdEndTime" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1"  @change="getTime">
</el-date-picker>

最后那个getTime方法是百度出来的,解决获取日期结果值不是输入框里看到的日期字符串的方法,getTime代码为:

getTime(date){
vue.searchForm.fdEndTime = date;
}

这里的vue是我的element-ui对象,也是Vue对象。

加上这个getTime方法之后,果然通过vue对象可以获取正确的期望中的日期字符串,可是升级到2.0版本后,这里的date传参居然变成了Date对象本身!这个概念转换是对的,可是你有没有想过旧系统已经基于以前版本开发的代码啊,全部要改啊!。。。

只好把项目里所有getTime方法里的date传参不再进行简单赋值,而是通过日期字符串格式化后再赋值:

getTime(date){
var date2 = date.format("yyyy-MM-dd");
vue.searchForm.fdEndTime = date2;
}

当然,在这之前,你需要对Date类做扩展(百度一大堆):

Date.prototype.format = function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
} /************************* 以下是本类测试方法 *********************************/ var mydate = new Date();
var mydateStr = mydate.format("yyyy-MM-dd");
console.log('yyyy-MM-dd mydateStr=='+mydateStr); var mytime = new Date().format("yyyy-MM-dd hh:mm:ss");
console.log('yyyy-MM-dd hh:mm:ss mytime==='+mytime);

switch开关控件瘫痪表现

switch开关,现在改成这样了:

然后获取值和设置值的旧的那一套全部失效,原因是现在的值默认是true和false,而原来的旧版本的值是可以直接设置值为1或0或其它什么值的,所以导致设置值和获取值全部失效。

结语

鉴于当前element-ui升级后的表现,看来它背后的技术团队还没有具备像sring团队那样的良好软件规范意识,所以不推荐element-ui作为追求稳定型的商用系统。

element-ui的不稳定性的更多相关文章

  1. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  2. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  3. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

  4. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  5. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

  6. Html | Vue | Element UI——引入使用

    前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

  7. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  8. 上传图片组件封装 element ui

    // element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...

  9. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

  10. vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用

    其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...

随机推荐

  1. 如何设置在html中保留超链接格式但不实现跳转

    ---恢复内容开始--- 老师布置了一个任务,要求用户登录或者不登录都会有一个主页(home.jsp),如果登录的话就会跳转至登录界面(login.jsp),在登录界面中有个验证码,还要求有个和很多登 ...

  2. vscode plugins

    ├─ .obsolete├─ .wlck├─ .wtid├─ abeyuhang.vscode-lesslint-0.0.1├─ abierbaum.vscode-file-peek-1.0.1├─ ...

  3. oracle中日期类型 to_date 和to_timestamp什么区别啊?

    1.to_date() 和to_timestamp()区别 由于oracle中date类型只支持到秒,不支持到毫秒,所以to_date()不能取到毫秒.如果要取到毫秒,oracle 9i以上版本,可以 ...

  4. commons-lang3工具类学习(二)

    三.BooleanUtils 布尔工具类 and(boolean... array) 逻辑与 BooleanUtils.and(true, true)         = true    Boolea ...

  5. 浮点型的三个特殊值 Double.NEGATIVE_INFINITY Double.POSITIVE_INFINITY Double.NaN

    Double.NEGATIVE_INFINITY 负无穷 Double.POSITIVE_INFINITY 正无穷 Double.NaN 非数 注意:浮点数才有无穷的概念,整数是没有的 比如: int ...

  6. linux c使用socket进行http 通信,并接收任意大小的http响应(三)

    使用socket进行http通信的时候,浏览器返回的响应经常不是固定长度的,有时候很大,有些时候又非常小,十分讨厌.如果仅仅只是为了接收一小段信息,设置一个十分大的缓存,这样又会十分浪费.而且经常更改 ...

  7. 版本控制git第一篇

    一.git的下载与安装 参考:https://blog.51cto.com/wangfeng7399/2352524 Git 是一个开源的分布式版本控制软件,用以有效.高速的处理从很小到非常大的项目版 ...

  8. Mysql服务配置优化

    mysql服务器优化包含 硬件优化.操作系统配置优化(cpu调度.网络.内存.虚拟内存.磁盘io).Mysql服务配置优化(最大连接数.表缓存等.存储引擎).表结构优化.索引优化 总共5个方面. 本片 ...

  9. ionic框架使用步骤

    nodejs下载:https://npm.taobao.org/mirrors/node一.全局安装ionic: npm install -g cordova ionic 如果安装失败: npm in ...

  10. python3入门教程(一)之 hello world

    概述 python 这门语言这几年非常的火,很多技术都用的到,像爬虫,大数据,人工智能等,包括很多的小孩都首选python作为入门学习语言,那python 究竟是怎样一门语言呢? Python 是一个 ...