专栏大纲： 《VUE+Django：手把手教你打造自己的电商独立站》专栏写作大纲
上一篇： 《VUE+Django：手把手教你打造自己的电商独立站》2.7.3 VUE2实现网站首页详解
在src/page目录下创建一个AllProducts.vue，用于展示所有不同类型的商品，页面设计如下：
加入以下代码
<template> <div> <el-row> <el-col :span="6"> <div class="filter"> <h3>所有分类</h3> <el-row> <el-col :span="8"> <el-select v-model="type" placeholder="类型"> <el-option label="衣服" value="clothes"></el-option> <el-option label="鞋子" value="shoes"></el-option> </el-select> </el-col> <el-col :span="8"> <el-select v-model="size" placeholder="尺寸"> <el-option label="S" value="small"></el-option> <el-option label="M" value="middle"></el-option> <el-option label="L" value="large"></el-option> </el-select> </el-col> <el-col :span="8"> <el-select v-model="filter" placeholder="筛选条件"> <el-option label="默认" value="default"></el-option> <el-option label="新品" value="new"></el-option> <el-option label="促销" value="sale"></el-option> </el-select> </el-col> </el-row> </div> </el-col> <el-col :span="18"> <div class="sort"> <h3>排序条件</h3> <el-radio-group v-model="sort"> <el-radio-button label="default">综合</el-radio-button> <el-radio-button label="sales">销量</el-radio-button> <el-radio-button label="price">价格</el-radio-button> <el-input-number v-model="minPrice" controls-position="right" :min="0" :max="maxPrice" :step="0.1" label="最低价"></el-input-number> <el-input-number v-model="maxPrice" controls-position="right" :min="minPrice" :step="0.1" label="最高价"></el-input-number> <el-button type="primary">确定</el-button> </el-radio-group> </div> <div class="goods"> <el-row> <el-col :span="6" v-for="item in 8" :key="item"> <el-card> <img src="https://picsum.photos/200/200" alt=""> <div class="good-info"> <h4>商品名称</h4> <p>商品描述</p> <p>价格</p> </div> </el-card> </el-col> </el-row> </div> <div class="pagination"> <el-pagination layout="prev, pager, next" :total="1000" :page-size="20" :current-page.sync="currentPage" @current-change="handleCurrentChange" style="text-align:center;"> </el-pagination> </div> </el-col> </el-row> </div> </template> <script> export default { data() { return { type: '', size: '', filter: '', sort: 'default', currentPage: 1 }; }, methods: { handleCurrentChange(val) { console.log(`当前页: ${val}`); } } }; </script> <style scoped> .filter { background-color: #f2f2f2; padding: 20px; margin-bottom: 20px; } .sort { margin-bottom: 20px; } .goods { display: flex; flex-wrap: wrap; justify-content: space-between; } .good-info { padding: 10px; text-align: center; } .pagination{ text-align: center; } </style>
页面主要作为示例，功能比较简单，使用ElementUI实现，主要包括：
- el-select实现下拉选项
- el-radio-group实现单选
- el-input-number实现计数器
- el-pagination实现分页功能
