用vue实现一个用el-col和el-row的栅格布局
时间: 2024-05-16 08:12:38 浏览: 141
可以按照以下步骤使用vue实现一个用el-col和el-row的栅格布局:
1. 在 `index.html` 中引入 `Vue` 和 `element-ui` 的样式文件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue App</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./main.js"></script>
</body>
</html>
```
2. 在 `main.js` 中创建一个Vue实例,并引入 `el-col` 和 `el-row` 组件:
```javascript
import Vue from 'vue';
import { Row, Col } from 'element-ui';
Vue.use(Row);
Vue.use(Col);
new Vue({
el: '#app',
template: `
<el-row>
<el-col :span="8">1</el-col>
<el-col :span="8">2</el-col>
<el-col :span="8">3</el-col>
</el-row>
`
});
```
3. 在模板中使用 `el-row` 和 `el-col` 组件,设置 `span` 属性来控制每列的宽度比例:
```html
<el-row>
<el-col :span="8">1</el-col>
<el-col :span="8">2</el-col>
<el-col :span="8">3</el-col>
</el-row>
```
这样就可以使用 `el-col` 和 `el-row` 组件来实现栅格布局了。
阅读全文