使用element-ui中的el-col标签后,页面无响应

一、问题

使用element-ui布局中的 <el-col></el-col>标签后，突然发现页面没有响应，刷新都不起作用。

具体情况如下：

        点击页面的任何地方都没有反应。

        刷新后，页面标题栏一直在“转圈”，然而并没有加载出东西

二、原因

1.没有使用<el-row></el-row>标签， 直接使用<el-col></el-col>标签，并且添加了span值:parseInt(24/cols)

 <el-col :span="parseInt(24/cols)" :key="key"  v-for="(item,key) in patientInformation">
        {{item.label}}:{{item.value}}
 </el-col>

 1)cols为偶数时,就会出现上述错误

        由于无法刷新,浏览器调试工具无法调出,我也不知道发生了什么。

        但和正常情况下相对比，猜测可能是此时<el-col></el-col>标签外面没有自动渲染<el-row></el-row>标签。

 2)cols为奇数时,没有上述错误

        打开浏览器调试工具，发现自动在<el-col></el-col>标签外面添加了一个<el-row></el-row>标签

三、解决

手动在外层添加了<el-col></el-col>标签，无论cols为偶数还是奇数，都可以正常运行,没有浏览器不响应的问题。

<el-row>
     <el-col :span="parseInt(24/cols)" :key="key"  v-for="(item,key) in 
     patientInformation">
        {{item.label}}:{{item.value}}
     </el-col>
</el-row>

四、总结

1.使用el-col时，最好在外层放置<el-row></el-row>标签，否则可能会出现   难以预料的错误。

2.使用el-col标签时，外层只有一个<el-row></el-row>，内部的<el-col>超出一行后，也能够自动换行。

/*

希望对你有帮助！

如有错误,欢迎指正!

*/