1. 新建分支

2. 新建component/goods/List.vue组件文件

router.js添加List.vue组件

3. 布局商品列表页面

在main.js中通过filter定义一个时间过滤器

Vue.filter('dataFormat', function (originVal) {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')
  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
复制代码

然后使用作用域插槽的形式：

<el-table-column
      label="商品创建时间"
      prop="add_time"
      width="180px"
      >
      <template v-slot:default="slotProps">
        {{slotProps.row.add_time|dataFormat}}
      </template>
      </el-table-column>
复制代码

4. 实现分页功能

使用element ui组件库实现分页功能

5. 实现搜索功能，删除商品功能

6. 如何上传图片，使用element ui组件upload

实现以下布局以及功能：

在使用upload组件上传图片的时候需要手动指定header头

商品内容区使用到富文本插件,先导入然后按照官方文档使用

7. 遇到的问题以及收获

级联框需要的数据是addForm.goods_cat，goods_cat是数组，但是请求的时候需要字符串，所以需要进行深拷贝；
所以需要安装插件lodash进行深拷贝，深拷贝参考

// 进行深拷贝lodash cloneDeep(obj)
        const form = _.cloneDeep(this.addForm)
        form.goods_cat = form.goods_cat.join(',')
        console.log(form)
复制代码

最后完成提交 视频连接