首先，我们需要在
Vue CLI中创建一个新的项目:
```
vue create
商品后台管理系统
```
然后，我们安装所需的依赖:
```
npm install --save-dev
vue-router
npm install --save-dev axios
npm install --save-dev element-plus
```
接下来，我们需要设置
Vue Router，为多
规格页面设置路由。在`src/router/index.js`中
添加以下代码:
```javascript
import { createRouter, createWebHistory } from '
vue-router'
import Product from '../views/Product.
vue'
import ProductSpec from '../views/ProductSpec.
vue'
const routes = [
{
path: '/',
name: 'Product',
component: Product
},
{
path: '/product/:id/spec',
name: 'ProductSpec',
component: ProductSpec,
props: true
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
```
在这里，我们定义了两个路由，一个是
商品列表页面(Product)，另一个是
商品多
规格页面(ProductSpec)，并且我们使用了路由传参来传递
商品的id。
接下来，我们需要创建两个组件: `Product.
vue`和`ProductSpec.
vue`。
在`src/views/Product.
vue`中，我们可以使用Element Plus中的Table组件来展示
商品列表。
```html
<template>
<div>
<el-table :data="products" style="width: 100%">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="
商品名称"></el-table-column>
<el-table-column prop="price" label="价格"></el-table-column>
<el-table-column label="操作">
<template #default="{ row }">
<router-link :to="{ name: 'ProductSpec', params: { id: row.id } }">查看多
规格</router-link>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Product',
data() {
return {
products: []
}
},
created() {
axios.get('/api/products').then(response => {
this.products = response.data
})
}
}
</script>
```
在这里，我们使用了Axios来获取
商品列表，并将其展示在Table组件中，同时通过`<router-link>`来
添加一个路由链接，当用户点击时，会跳转到多
规格页面，并将
商品id作为参数传递。
接下来，在`src/views/ProductSpec.
vue`中，我们可以使用Element Plus中的Form组件来展示
商品的多
规格。
```html
<template>
<div>
<el-form :model="spec" label-width="120px">
<el-form-item label="
商品名称">
<el-input :value="product.name" disabled></el-input>
</el-form-item>
<el-form-item label="价格">
<el-input-number v-model="spec.price"></el-input-number>
</el-form-item>
<el-form-item label="
规格">
<el-select v-model="spec.size" placeholder="请选择">
<el-option v-for="size in sizes" :key="size" :label="size" :value="size"></el-option>
</el-select>
</el-form-item>
<el-form-item label="颜色">
<el-radio-group v-model="spec.color">
<el-radio v-for="color in colors" :key="color" :label="color">{{ color }}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'ProductSpec',
props: ['id'],
data() {
return {
product: {},
spec: {
price: 0,
size: '',
color: ''
},
sizes: ['S', 'M', 'L'],
colors: ['红色', '蓝色', '绿色']
}
},
created() {
axios.get(`/api/products/${this.id}`).then(response => {
this.product = response.data
this.spec = this.product.spec || this.spec
})
}
}
</script>
```
在这里，我们使用了Axios来获取
商品信息，并在Form组件中展示多
规格的相关信息。同时，我们还定义了
规格的尺寸和颜色的选项，用户可以从中选择。
最后，在`src/main.js`中，我们需要设置Axios的基础URL，以便获取数据:
```javascript
import { createApp } from '
vue'
import App from './App.
vue'
import router from './router'
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000/'
createApp(App).use(router).mount('#app')
```
现在，我们已经完成了
商品后台管理系统的多
规格页面。
555
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
