element-ui+vue使用时遇到的坑

从事前端工作也有几年了，
大大小小的项目也做了不少，遇到过许多的坑，
有时候项目太忙，没有那么多的时间来整理一些知识点。
挺吃亏的，，
因为我始终相信不总结就相当于没学到东西。

		所以最近开始写起了博客，

我深知前端大佬比比皆是，但这也仅仅是我想要对自己负责一点，

		一来可以提升自己，

当遇到同样问题时候，可以很快想起这些知识点的解决方案，

		二来可以方便其他人查阅问题点，便于后来者的学习

（ 因为当我遇到问题的时候也经常去查找，去找度娘，去各种博客，看看别人的理解，到各种群里面询问各路大神们，所以，我觉得在博客里记录下自己的学习感悟和总结是一件利己也利他人的事情 不喜勿喷 也希望大家能够多多指点迷津）

下面总结一下 vue结合element-ui 遇到的坑

1. 有个需求是希望：

在el-radio中，当选中某个radio的时候，希望可以打开el-popover ，
如果按照正常思维去做嵌套的话，

当选择备选项1的时候，是不可能触发popover打开，
原因是el-radio本身就有一个点击事件，
当它再次作为popover的触发按钮的时候，
那么el-radio就带了两个点击事件，导致事件冲突了，

我在网上查阅了一番，看到一个很好的解决方案：
在radio的外面包一层button，把触发popover的事件移到button上面去，但是仅仅这样做还是不能打开popover的，

解决：

 		<el-radio-group v-model="radio3" size="small">
            <el-popover
                    placement="bottom"
                    title="标题"
                    width="200"
                    v-model="visible"
                    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                <button slot="reference" >
                    <el-radio label="1">备选项1el-radio>
                button>
            el-popover> 
            <el-radio label="2">备选项2el-radio>
        el-radio-group>

当把popover绑定 v-model 就可以打开啦~还是要多看看elementui的api的）

but

这仅仅解决了打开popover，事实上这里边还藏着一个坑，有很多人很容易就又掉到另一个坑里面去了，

大家会发现，会有一个时不时出现的bug，那就是点击备选项1的时候，页面会自己刷新，这是为啥呢？还能不能好好玩了？
Emm…这是因为，

原生的button有一个type属性，如果不给，Internet Explorer 的默认button的type是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”，
如果默认是submit就会出现刷新的问题，

所以我们要时刻注意使用button的时候，要给type属性，
具体看情况定，
这里我们就给button的type=“button”，
告诉浏览器，我这个按钮就只是个按钮而已。

<button slot="reference" type="button">
   <el-radio label="1">这样就好啦el-radio>
 button>

看，一坑接一坑，不总结的话，下次可能又忘了，
下次再百度去查的时候，可能就又要找半天，
总结一下，
这个知识点就是我的啦~~~
嘿``````

2. 导航栏跟控制台之间有一个间距，
   

可是我的样式中并没有设置这个所谓的element.style，但是当我把这些margin-left跟margin-right去掉之后，这个间距就消失了。

解决方案：

使用!important来覆盖掉这个element.style的样式，因为使用了!important的样式的优先级是最高的。于是我修改了一下样式

间距没有了

问题解决

3. 使用el-dialog 遮罩层把显示内容遮住了

原因： Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。

解决方案：

		参考链接：https://blog.csdn.net/solocoder/article/details/80936549

4. 使用el-dialog时 表头title居中显示

el-dialog弹窗title一直居中，center样式设置为true也不行

原因是：继承了父元素的 text-align:center

解决方案：

		参考链接：https://blog.csdn.net/ligaoming_123/article/details/81163266

5. 使用el-select 不能继承父元素的宽度

原因是：el-select 本身是 inline-block

解决方案：

6. element走马灯–取消自动播放

问题：
用官网上提供的autoplay不起作用，

解决方案：

将interval设置为0方可

7. input中验证只能输入数字

问题：

input中验证只能输入数字

解决方案：

在v-model后边加上.number只能现在不能以非数字开头，
用type="number"可以解决
在后台返数据的时候也许返回的是字符串类型的数字，
所以在赋值的时候需要判断一下数据类型

8. form表单验证

问题：
在打开编辑弹窗时利用$nextTick()对输入框进行赋值，
然后保存时快速多次点击保存按钮，
在下次打开编辑窗口时，
input中的内容正确但是验证报红。

解决方案：

在打开的时候利用clearValidate对文本框中的验证进行重置
( 这次重置也是在$nextTick ( ) 中，
或者按照代码顺序卸载 $ nextTick ( ) 后面，
切记 不是里边，总之不能卸载 $ nextTick ( ) 上边;
不能利用 resetField ( ) 否则内容将被清空 )
注：form表单中的model和ref尽量要写成一样的，否则可能会出错。。。

暂时就这么多 等想起来或再遇到问题添加