文章目录
0. 准备工作
component下新建文件夹goods下新建文件List.vue,并在路由中引入文件
1.界面布局
1.1 导航界面
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
2.卡片视图区域
2.1 界面样式
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容"
v-model="queryInfo.query"
clearable
@clear="getGoodsList">
<el-button
slot="append"
icon="el-icon-search"
@click="getGoodsList">
</el-button>
</el-input>
</el-col>
<el-col
:span