一文教你如何用Vue.js和Element UI實現商品管理，提升工作效率！

1.Tab卡添加商品

實現整體布局

/src/pages/goods/Index.vue

實現Tab卡布局

/src/pages/goods/components/Form.vue

驗證表單數據

validate/goods.js

export default {
  first_cateid (value) {
    value = parseInt(value)
    if (value === 0) {
      return '請選擇一級分類'
    }
    return true
  },
  second_cateid (value) {
    value = parseInt(value)
    if (value === 0) {
      return '請選擇二級分類'
    }
    return true
  },
  goodsname (value) {
    return value === '' ? '請輸入商品名稱' : true
  },
  price (value) {
    if (!value) return '請輸入價格'
    if (isNaN(value)) return '價格必須為數字'
    if (value < 0) return '價格必須為正數'
    return true
  },
  market_price (value) {
    if (!value) return '請輸入市場價格'
    if (isNaN(value)) return '市場價格必須為數字'
    if (value < 0) return '市場價格必須為正數'
    return true
  },
  specsid (value) {
    value = parseInt(value)
    if (value === 0) {
      return '請選擇商品規格'
    }
    return true
  },
  specsattr (value) {
    return value === '' ? '請選擇規格屬性' : true
  },
  img (value) {
    if (!value) return '請上傳商品圖片'
    return true
  },
  description (value) {
    return value === '' ? '請輸入商品詳情' : true
  }
}

添加接口文件

/src/api/goods.js

import http from './http'

// 添加商品
export const addGoods = (data) => {
  // 有數據上傳, 需要設置headers
  return http.post('/goodsadd', data, {
    headers: {
      'Content-type': 'multipart/form-data'
    }
  })
}

// 修改規格
export const updateGoods = (data) => {
// 判斷data中是否包含id屬性且大于0
  if (!data.get('id')) {
    return Promise.reject(new Error('缺少ID參數或id參數錯誤'))
  }
  // 有數據上傳, 需要設置headers
  return http.post('/goodsedit', data, {
    headers: {
      'Content-type': 'multipart/form-data'
    }
  })
}

// 分頁獲取商品數據
export const getPageGoods = (page = 1, size = 4) => {
  return http.get('/goodslist', {
    params: {
      page,
      size
    }
  })
}

// 獲取商品總數量
export const getGoodsTotal = () => {
  return http.get('/goodscount')
}

// 刪除商品
export const deleteGoods = (id) => {
  return http.post('/goodsdelete', { id })
}

vuex中處理商品數據

// 導入接口文件
import { getPageGoods, getGoodsTotal } from '@/api/goods'

export default {
  namespaced: true,
  state: {
    allList: [], // 所有的規格
    list: [],
    page: 1, // 當前的頁碼
    size: 4, // 每頁顯示的條數
    total: 0 // 管理員用戶總數
  },
  mutations: {
    SET_LIST (state, list) {
      state.list = list
    },
    SET_TOTAL (state, total) {
      state.total = total
    },
    SET_PAGE (state, page) {
      state.page = page
    },
    SET_ALLLIST (state, list) {
      state.allList = list
    }
  },
  actions: {
    getGoodsList ({commit, state}) {
      getPageGoods(state.page, state.size).then(res => {
        // console.log(res)
        commit('SET_LIST', res)
      })
    },
    getGoodsTotal ({commit}) {
      getGoodsTotal().then(res => {
        // console.log(res)
        commit('SET_TOTAL', res[0].total || 0)
      })
    },
    // 獲取所有商品
    async getAllGoods ({commit}) {
      const total = await getGoodsTotal().then(res => res[0].total || 0)
      // console.log(total)
      if (total > 0) {
        const list = await getPageGoods(1, total)
        // console.log(list)
        commit('SET_ALLLIST', list)
      }
    }
  }
}

展示數據

/src/pages/goods/components/list.vue