一. 实现商品列表goods-list 二. 自己做遇到的问题 三. 基本布局实现 四. 内容渲染 五. 项目优化 六. 项目上线 一. 实现商品列表goods-list 1.1 创建新分支 1.2 根据queryInfo属性的数据获取当前页面的数据 1.3 渲染页面 时间过滤器(Vue全局注册, 把时间戳格式化) .padStart(2, '0')如果字符串不足两位, 前...
Goods.vue <template> <el-button type="text" @click="dialogVisible = true">添加商品</el-button> <el-dialog title="添加商品" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> 商品名称: <el-input placeholder="请输入内容" v-model="goods_name"> </el-input> ...
商品列表主要由Breadcrum面包屑、Card面板、Table表格、Button按钮组成 这部分和用户管理部分很类似,主要是前端向服务器发送数据请求,服务器收到请求,响应数据,返回给前端,前端把响应的数据存储在定义好的数组中,然后在Table表格中交给数据源model,然后每一个Table-item接受数组中的对应的字段信息。这样商品数据就展示出来...
2、通过路由加载商品列表组件 在goods文件夹和Params.vue文件: <template> 商品列表组件 </template> export default { } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 添加路由: import List from '../components/goods/List.vue' const routes = [ { path: '/', red...
1、通过编程式导航跳转到商品添加页面 给添加商品按钮添加点击事件: <el-buttontype="primary"@click="goAddpage">添加商品</el-button> goAddpage事件函数: //跳转到添加商品页面goAddpage() {//路由导航对象.push函数,跳转到指定的路由页面this.$router.push('goods/add') ...
商品列表 <el-table :data="listData" style="width: 100%"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="商品名称"></el-table-column> <el-table-column prop="price" label="商品价格"></el-table-column> <el-table-column prop="quantity" l...
label="商品编号" align="center" :show-overflow-tooltip="true" > <template slot-scope="scope"> <el-input v-model="scope.row.no" v-if="scope.row.showFormDom" disabled class="W370" ></el-input> {{ scope.row.no }} </template> </el-table...
-- 搜索框 --><el-inputtype="text"class="el-input"placeholder="请输入商品名"v-model="searchName"><islot="prefix"class="el-input__icon el-icon-search"></el-input><el-buttontype="primary":disabled="disabled"@click="search":loading="loading">搜索</el-button><!-- 商品列表渲染的地方...
可以使用Table表格组件来展示数据列表,例如用户列表、商品列表等。可以设置表格的样式和列属性。 6.Dialog对话框组件:可以使用Element-ui的Dialog对话框组件来创建各种类型的对话框,例如确认对话框、提示对话框等。可以设置对话框的样式和内容。 三、常用用法示例 1.使用Button创建普通按钮: ```html <el-buttontype="...
-- 商品列表 --><el-table:data="products"borderstyle="width: 100%"><!-- 设置六个栏 序号、名字(name)、图片(scope.row.pic)、价格(price)、库存(amount)、操作--><el-table-columntype="index"label="序号"width="50"align="center"></el-table-column><!-- 通过props传参 绑定name属性 从而...