day05电商管理系统商品列表

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头

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

最后完成提交 视频连接