vue 打包之后不兼容ie_vue踩坑小记（三）

1、Element UI的Tree组件中在加载之后默认选中指定的节点

当获取数据源data后通过this.$refs.menuTree.setCurrentKey()指定是没有效果的，原因就是树的相关DOM未渲染完，因此需要使用this.$nextTick(()=>{})，以确保DOM已渲染完全（问题不大，但最主要的是在谷歌浏览器中直接调用也是正常的，但是在IE浏览器直接调用就无法渲染选中效果了，这才是坑哦。。。）

2、强制换行和禁止换行

（1）word-break: break-all

假设div宽度为450px自动换行，如果该行末端有个很长的英文单词，它会把单词截断，一部分保持在行尾，另一部分换到下一行。

（2）word-wrap: break-word

例子与上面一样，但区别就是它会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，他会自动把整个单词放到下一行，而不会把单词截断掉。

（3）white-space: pre-wrap

对于强制换行，用word-wrap: break-word;就可以了。

（4）white-space: nowrap

禁止换行。

text-overflow: ellipsis;让多出的内容以省略号"..."来表达。但是这个属性主要用域IE等浏览器，Opera浏览器用-o-text-overflow:ellipsis;而Firfox浏览器没有这个功能，多出的内容只能隐藏起来。

3、disabled的兼容问题

IE10及以上：

IE9：

IE9及以下无法改变disabled状态的标签内容的字体颜色，在网上找了很多答案都没什么效果，那就只能曲线救国了，像input、textarea等输入型表单标签可以通过readOnly、unselectable="on"组合进行使用，至于按钮等标签的话，那就只能纯手撸了，比较简单，这里不做详细介绍了。

4、vue中data初始化对象问题

场景是这样的：

在父组件.vue中对子组件所要传的对象进行添加参数，如下所示：

这里dataObj和flag都是data中所声明的数据对象，但是dataObj初始化时是没有disabled的，当后续通过修改flag改变<myComponent />组件状态是没有效果的，具体原因就是上面截图中官网所述，disabled并没有称为响应式的属性。

简简单单的随笔小记，希望可以通过不断地总结，不断地成长！