蘇寧物流管理後臺系統

商品管理 >商品分類

一、準備工作

在元件compo’nents中新增一個名為shop的資料夾,資料夾下放入categories.vue的元件
在router>index.js中引入路由,並且新增至/home下的children內

//引入商品分類元件
import Categories from '../components/shop/Categories.vue'

//在home父元件下引入商品分類子元件的路由
{
        path: '/categories',
        component: Categories
      }

此時使用vue ui命令執行檢視可檢視出categories的路徑已經就緒

二、麵包屑導航條製作

使用elemen ui元件庫引入麵包屑導航條

ps:使用之前須在element.js中匯入和全域性使用Breadcrumb和BreadcrumbItem

 <!-- 麵包屑導航條 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分類</el-breadcrumb-item>
    </el-breadcrumb>

則會出現出如下檢視時說明引入完成

三、卡片檢視區域

在商品分類元件中,最為核心的算是卡片檢視區域了,那麼該如何製作卡片檢視區域呢?
卡片檢視區域分為三部分,上面的為新增按鈕,中部的為核心的表格,下面的為分頁區域
讓我們先來看看新增按鈕的製作:
首先,搭建基本的卡片框架:

 <el-card>
      <el-row>
        <el-col>
          <!-- 新增角色按鈕 -->
          <el-button type="primary">新增角色</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <tree-table :data="catelist" :columns="columns  "></tree-table>

      <!-- 分頁區域 -->
    </el-card>

這裡為最基本的卡片區域,新增按鈕使用元件庫中的

ps:需按需引入Row與COl,Button這裡引入不過多強調

import Vue from 'vue'
import {
	Button, Form, FormItem, Input, Message, 
	Container, Aside, Header, Main, Menu, Submenu, 
	MenuItemGroup, MenuItem,Col,
	 Breadcrumb, BreadcrumbItem,Card,Row,
	 Table,TableColumn,Switch,Tooltip,Pagination,Dialog,MessageBox,
	 Tag,Tree,Select,Option

} from 'element-ui'
// import { use } from 'vue/types/umd'
Vue.use(Select)
Vue.use(Option)
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Header)
Vue.use(Main)
Vue.use(Submenu)
Vue.use(Menu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)

Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

<el-row>
        <el-col>
          <!-- 新增角色按鈕 -->
          <el-button type="primary">新增角色</el-button>
        </el-col>
      </el-row>

新增按鈕即可完成,效果為下圖所示:

接下來開始匯入vue-table-width-grid的外掛(請在vue ui中選擇依賴後點選安裝外掛,這裡選擇執行時依賴,搜尋即可!)

安裝完成後即可開始引入
點選入口函式main.js,在裡面開始進行匯入

import TreeTable from 'vue-table-with-tree-grid'
//全域性註冊元件
Vue.component('tree-table', TreeTable)

這樣就可正常使用TreeTable了!

在這之前,須先建立一個生命週期函式用來獲取後臺api介面的值

 created() {
    this.getCateList()
  },

建立一個空陣列和總數

 //建立一個資料用於呼叫,預設為空
      catelist: [],
      total: 0,

設定獲取列表的引數物件

 queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },

使用axios呼叫後臺api的資料進行操作,使用get請求來獲取商品分類的資料,注意這裡的請求的資料返回的值為promise函式,我們需要簡化這步操作,需要使用await和async

 async getCateList() {
      const { data: res } = await this.$http.get('categories', {
      //返回的是queryInfo的引數物件
        params: this.queryInfo,
      })
      if (res.meta.status !== 200) {
        return this.$message.error('res.data.msg')
      }
      //把資料列表給catalist
      this.catelist = res.data.result
      this.total = res.data.total
      console.log(res)
    },

如果此請求失敗,則返回錯誤,請求成功後將他的值交給所建立的空陣列
將所得的值繫結給表格中

   <tree-table :data="catelist" :columns="columns  "></tree-table>

屬性	作用
columns	指定的寬度和數量
datelist	繫結的資料值

 columns:[{
          label:'分類名稱',
          prop:'cat_name'
      }],

在data()中設定columns屬性的名稱和指定獲取的資料