Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）七（品牌查询，品牌提交表单信息以及表单页面信息和校验）以及axios（Ajax

route(“/item/brand”,‘/item/MyBrand’,“Brand”),

（3）进入Vuetify的官网：https://vuetifyjs.com/zh-Hans/components/data-tables/

找到服务器端分页和排序

直接复制源代码

（4）完善其对应的源代码

定义与上述冒号对应的方法和数据

继续参考官网的源代码

• 编写相关头信息的代码（ :headers=“headers”）

<v-data-table

:headers=“headers”

:items=“desserts”

:options.sync=“options”

:server-items-length=“totalDesserts”

:loading=“loading”

class=“elevation-1”

http://manage.leyou.com/#/item/brand

• 完善内容数据相关源代码（ :items=“desserts”）这里需要去远程加载数据

<v-data-table

:headers=“headers”

:items=“brands”

:pagination.sync=“pagination”

:total-items=“totalDesserts”

:loading=“loading”

class=“elevation-1”

• 完善其他相关内容

• :loading="loading"设置加载前开启加载后关闭

先默认设置为不显示

• 完善渲染表格的内容

全部代码

<v-data-table

:headers=“headers”

:items=“brands”

:pagination.sync=“pagination”

:total-items=“totalBrands”

:loading=“loading”

class=“elevation-1”

{ { props.item.id }} { { props.item.name }} { { props.item.image }} { { props.item.letter }}

• 页面效果

• 设置数据居中

• 设置图片显示

品牌中有，id,name,image,letter字段

（5）完善品牌管理的，新增品牌，搜索框，编辑以及删除按钮

• 设置操作（设置当中的修改和删除按钮）

在headers当中

访问页面效果

完善按钮效果

设置标签缩小 在后面填写small

设置按钮为图标

edit

delete

效果

• 新增按钮

新增品牌

效果

• 搜索框（并控制其宽度）

新增品牌

效果

发现页面下方以及按钮不太好看

在搜索框下默认有错误提示

设置搜索框隐藏细节并去掉按钮的small