这篇文章主要介绍了Element-UI 使用el-row 分栏布局的教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
使用多个卡片显示的时候,并且要求当列数到一定数目的时候,要自动换行,el-container 布局就满足了需求了,就要用到el-row 布局做分栏处理,
代码如下
用户标签:{{item.tag}}搜索标签:{{item.seatag}}短信签名:{{item.wxname}}客服QQ:{{item.qq}}商务合作:{{item.buscoo}}添加APP
css
补充知识:vue element框架中el-row控件里按列排列失效问题的解决
最近我在使用vue的ui框架element-ui,可能是自己经验不足,遇到了很奇怪的问题,在这里特意把解决的步骤记录一下,希望能对大家有所帮助。
首先我使用的分栏间隔的布局方式,参照官网上的例子:
应该效果如下图:
但是我在参考例子后,代码如下:
App.vue
1 1 1 1
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui'//A Vue.js 2.0 UI Toolkit for Web Vue.use(ElementUI); Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '' })
可是效果如下:
奇怪了,为何布局变成了纵向,明明row中的布局应该是按列排列的。经过排查发现自己少了这一行:import ‘element-theme-chalk';
也就是代码应该如下:
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui'//A Vue.js 2.0 UI Toolkit for Web import 'element-theme-chalk'; Vue.use(ElementUI); Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '' })
这个时候效果如下,应该是我们希望看到的,至少列生效了:
我看了一下文档,发现并没有特别指出这一行的配置,可能是我遗漏了或者其他的原因导致的,也有可能是官网没有标识出这一点。总之加上了这一行配置解决了我的问题。在这里做一个笔记,也希望能够帮助到遇到类似的问题的同学。
以上这篇Element-UI 使用el-row 分栏布局的教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持html中文网。
以上就是Element-UI 使用el-row 分栏布局的教程的详细内容,更多请关注0133技术站其它相关文章!