1. Create a branch

2. Create the Component /goods/ list. vue file

Router. js adds the list. vue component

3. Layout the product list page

Define a time filter with filter in main.js

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}`
})
Copy the code

Then use the form of the scope slot:

<el-table-column
      label="Product Creation time"
      prop="add_time"
      width="180px"
      >
      <template v-slot:default="slotProps">
        {{slotProps.row.add_time|dataFormat}}
      </template>
      </el-table-column>
Copy the code

4. Implement paging function

Use the Element UI component library for paging

5. Realize search function and delete commodity function

6. How to upload pictures using Element UI component Upload

Implement the following layouts and functions:

You need to manually specify the header when uploading an image using the Upload component

The product content area uses the rich text plug-in, which is entered first and then used according to the official document

7. Problems and gains

Goods_cat is an array, but the request requires a string, so it needs to be deeply copied. So you need to install the plugin Lodash for deep copy, deep copy reference

// Make a deep copy of lodash cloneDeep(obj)
        const form = _.cloneDeep(this.addForm)
        form.goods_cat = form.goods_cat.join(', ')
        console.log(form)
Copy the code

Finally, the video connection is submitted