一，商品管理的商品列表页面搭建

 

 1.1，商品列表组件路由配置

import List from '@/views/Goods/List'

 {
    path: '/home',
    component: Home,
    // 重定向
    redirect: '/welcome',
    children: [
      { path: '/welcome', component: Welcome },
      { path: '/users', component: User },
      { path: '/rights', component: Rights },
      { path: '/roles', component: Roles },
      { path: '/categories', component: Cate },
      { path: '/params', component: Params },
      { path: '/goods', component: List },
    ]
  }

1.2，页面渲染时，发送请求，获取商品列表数据

请求参数

请求参数定义

  data() {
    return {
      // 查询参数对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      // 商品列表
      goodslist: [],
      // 总数据条数
      total: 0
    }

 

 mounted() {
    this.getGoodsList()
  },

  methods: {
    async getGoodsList() {
      const { data: res } = await this.$http.get('goods', {
        params: this.queryInfo
      })

      if (res.meta.status !== 200) {
        return this.$message.error('获取商品列表失败！')
      }

      this.$message.success('获取商品列表成功！')
      console.log(res.data)
      this.goodslist = res.data.goods
      this.total = res.data.total
    }
  }

数据页面填充

<template>
  <div>
    <!-- 面包屑导航区域 -->
    <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>

    <!-- 卡片视图区域 -->
    <el-card style="margin-top:20px">
      <!-- 搜索框 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加商品</el-button>
        </el-col>
      </el-row>

      <!-- 商品表格 -->
      <el-table :data="goodslist" border stripe style="margin:20px 0">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="商品名称" prop="goods_name"></el-table-column>
        <el-table-column label="商品价格(元)" prop="goods_price" width="95px"></el-table-column>
        <el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
        <el-table-column label="创建时间" prop="add_time" width="140px"></el-table-column>
        <el-table-column label="操作" width="130px">
          <template slot-scope="{row, $index}">
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" ></el-button>
          </template>
        </el-table-column>
      </el-table>
      
    </el-card>
  </div>
</template>

1.3，此时我们看到创建时间是个时间戳，我们需要将他过滤成标准的日期时间，需要用到vue的filter过滤器

在main.js中全局注册过滤器，originVal接收传过来的时间戳参数（row.add_time），过滤器的名称dateFormat

// 时间过滤器
Vue.filter('dateFormat', function(originVal) {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = dt.getMonth() + 1
  const d = dt.getDate()
  const hh = dt.getHours()
  const mm = dt.getMinutes()
  const ss = dt.getSeconds()
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

然后在表格日期列，用插值法填充

 <!-- 商品表格 -->
      <el-table :data="goodslist" border stripe style="margin:20px 0">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="商品名称" prop="goods_name"></el-table-column>
        <el-table-column label="商品价格(元)" prop="goods_price" width="95px"></el-table-column>
        <el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
        <el-table-column label="创建时间"  width="140px">
          <template slot-scope="{row, $index}">
            {{row.add_time | dateFormat}}
           
          </template>
        </el-table-column>

 

 

 

1.4，分页器页面搭建

<!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
      :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" 
      :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>

  handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getGoodsList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getGoodsList()
    },

 

1.5，搜索框搜索关键字，重新发送请求，获取商品数据，点击清空按钮，重新发送请求，获取数据

<!-- 搜索框 -->
      <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>

 

1.5，点击删除按钮，删除该商品

<el-table-column label="操作" width="130px">
          <template slot-scope="{row, $index}">
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(row.goods_id)" ></el-button>
          </template>
        </el-table-column>

// 点击删除按钮
    async removeById(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
      }

      const { data: res } = await this.$http.delete(`goods/${id}`)

      if (res.meta.status !== 200) {
        return this.$message.error('删除失败！')
      }

      this.$message.success('删除成功！')
      // 重新发送请求，获取新数据
      this.getGoodsList()
    },

 

1.6.点击添加商品按钮，跳转到add组件，配置下路由对象

<!-- 搜索框 -->
      <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="4">
          <el-button type="primary"  @click="goAddpage">添加商品</el-button>
        </el-col>
      </el-row>

 // 点击添加商品按钮，跳转到add组件
     goAddpage() {
      this.$router.push('/goods/add')
    }

路由配置

import Add from '@/views/Goods/Add'

  {
    path: '/home',
    component: Home,
    // 重定向
    redirect: '/welcome',
    children: [
      { path: '/welcome', component: Welcome },
      { path: '/users', component: User },
      { path: '/rights', component: Rights },
      { path: '/roles', component: Roles },
      { path: '/categories', component: Cate },
      { path: '/params', component: Params },
      { path: '/goods', component: List },
      { path: '/goods/add', component: Add },
    ]
  }

 

二，add添加商品组件页面搭建

 

 

 

 active是nunber类型

    <!-- 面包屑导航区域 -->
    <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>

    <!-- 卡片视图 -->
    <el-card style="margin: 20px 0">
      <el-alert title="添加商品信息" type="info" show-icon> </el-alert>

      <!-- 进度条 -->
      <el-steps :space="200" :active="0" finish-status="success" align-center style="margin: 15px 0">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title=" 商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </el-card>

 

2.1,左边选项卡页面

 

 

我们需要实现一个功能，数据联动效果，当点击左边选项卡第三项，顶部的进度条就在第三个，如何实现这个效果呢

el-tabs中的v-model记录的是el-tab-pane的name值（string), 

而在el-teps中的active记录的是el-step的激活的值（number）,0,1,2,3

此时只需要将v-modle中的值和active的值关联起来即可实现联动效果了

 

 在data中动态定义一个属性

data() {
    return {
      activeIndex:'0'
    }

  <!-- tabs栏区域 -->
      <el-tabs tab-position="left" v-model="activeIndex" style="height: 200px;">
        <el-tab-pane label="基本信息"  name="0">基本信息</el-tab-pane>
        <el-tab-pane label="商品参数"  name="1">商品参数</el-tab-pane>
        <el-tab-pane label="商品属性"  name="2">商品属性</el-tab-pane>
        <el-tab-pane label="商品图片"  name="3">商品图片</el-tab-pane>
        <el-tab-pane label="商品内容"  name="4">商品内容</el-tab-pane>
      </el-tabs>

我们然后在el-steps改造下，将字符串变成number类型

<!-- 进度条 -->
      <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center style="margin: 15px 0">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>