使用elementui +vue2.0生成商品展示列表页面
时间: 2023-08-03 20:03:58 浏览: 271
商品列表(elementui+vue),在线预览地址请看描述
好的,下面我将为你提供一个简单的示例代码,帮助你使用 ElementUI 和 Vue2.0 来生成商品展示列表页面:
1. 首先,你需要在你的项目中安装 ElementUI 和 Vue2.0:
```bash
npm install element-ui vue@2.0 --save
```
2. 在你的 `main.js` 文件中引入 ElementUI 和 Vue2.0:
```js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
3. 在你的组件中使用 ElementUI 的 `el-table` 和 `el-table-column` 组件来生成商品展示列表:
```html
<template>
<div>
<el-table :data="products">
<el-table-column prop="name" label="商品名称"></el-table-column>
<el-table-column prop="price" label="价格"></el-table-column>
<el-table-column prop="stock" label="库存"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
products: [
{ name: '商品1', price: 100, stock: 10 },
{ name: '商品2', price: 200, stock: 20 },
{ name: '商品3', price: 300, stock: 30 },
]
}
}
}
</script>
```
这样,你就可以使用 ElementUI 和 Vue2.0 来生成商品展示列表页面了。当然,还有很多其他的 ElementUI 组件可以帮助你快速构建页面,你可以根据自己的需要来选择使用。
阅读全文