1.在系统管理里面新增品牌管理菜单
2.复制之前逆向工程生成的前端页面代码到product目录下
3.重启renren-fast-vue前端项目：
npm run dev这里页面能正常显示，但是未能显示出新增等按钮：是因为权限问题：找到utils包下的index.js:让返回值始终为true:
/**
* 是否有权限
* @param {*} key
*/
export function isAuth (key) {
// return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
return true;
}4.自定义品牌的显示状态：
（1）vue表格中自定义列模板：通过Scoped slot来实现（也就是vue中的slot插槽机制，说白了就是在某个位置插入自定义的内容）：在需要修改的这一列定义一个<template>模板,在模板里面定义一个slot-scope属性：其中"scope"的值分装了当前列一整行信息、以及当前列的信息、以及索引、以及整个表格的状态信息。
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{
{ scope.row.date }}</span>
</template>（2）自定义显示状态
<el-table-column
prop="showStatus"
header-align="center"
align="center"
label="显示状态">
<template slot-scope="scope">
<el-switch
v-model="scope.row.showStatus"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>点击新增按钮时把显示状态有input框改为switch
<el-form-item label="显示状态" prop="showStatus">
// <el-input v-model="dataForm.showStatus" placeholder="显示状态[0-不显示；1-显示]"></el-input>
<el-switch
v-model="dataForm.showStatus"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>需要监听switch按钮的变化来给后端发送请求：
这里用到switch开关里面的change事件：它会传开关最新状态的值的参数
在switch开关中加入一个change事件：updateBrandStatus
<el-switch
v-model="scope.row.showStatus"
active-color="#13ce66"
inactive-color="#ff4949"
@change="updateBrandStatus">
</el-switch>在方法中加入此方法：（自动传入switch开关最新状态的值）
updateBrandStatus(status){
console.log(status);
},
当我们点击开关时，浏览器就会打印相关状态的值。
当是只接收状态值是不够的，我们需要知道改变的是哪个商品的状态，我们需要给updateBrandStatus传递一个参数，这个参数为这一整行数据：
<el-switch
v-model="scope.row.showStatus"
active-color="#13ce66"
inactive-color="#ff4949"
@change="updateBrandStatus(scope.row)">
</el-switch>在方法中进行接收：
updateBrandStatus(data){
console.log(data);
},当点击开关时，会获取到所有数据：（这个是一个对象）
获取到这些数据后就可以向后端发送请求修改某个商品的状态：
5.向后端发送请求：
（1）后端代码已经生成：
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody BrandEntity brand){
brandService.updateById(brand);
return R.ok();
}（2）前端发送请求：由于我们只需要向后端发送商品id和状态，所以解构data这个对象：
updateBrandStatus(data){
console.log(data);
let {brandId,showStatus} = data;
//发送请求修改商品状态
this.$http({
url: this.$http.adornUrl("/product/brand/update"),
method: 'post',
data: this.$http.adornData({brandId,showStatus},false)
}).then(({data}) =>{
this.$message({
type: "success",
message: "状态更新成功"
})
});
},但是这里会报错：
因为我们发送的showStatus是boolean值，而数据库需要的是int值。
这时我们需要使用switch的属性来操作开关状态的值：
active-value:开关激活的话，它的值默认为true
inactive-value:开关关闭的话，它的值默认为false
我们可以改变它的默认值，让默认值为0和1.
<el-switch
v-model="scope.row.showStatus"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0"
@change="updateBrandStatus(scope.row)">
</el-switch>