一、问题
使用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>超出一行后,也能够自动换行。
/*
希望对你有帮助!
如有错误,欢迎指正!
*/