第十七章第二节：细化修改品牌管理页面效果

1、修改表格的表头文字以及添加页面的label以及显示宽度

在列表页以及添加修改页直接修改显示的文字即可，brand-add-or-update.vue页面的el-form宽度可以调至140px

2、修改列表页“显示状态”为开关按钮

src\views\modules\product\brand.vue

<!-- 当前列显示自定义组件，参考elementui的表格组件-->
<template slot-scope="scope">
  <el-switch v-model="scope.row.data" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
</template>

3、修改添加修改页“显示状态”为开关按钮

src\views\modules\product\brand-add-or-update.vue

<el-switch v-model="dataForm.showStatus" active-color="#13ce66" inactive-color="#ff4949"></el-switch>

4、实现表格中显示状态“开关”的功能

请求com.applesnt.onlinemall.product.controller.BrandController中update方法
以下为主要代码片段

<el-table-column
        prop="showStatus"
        header-align="center"
        align="center"
        label="显示状态"
      >
        <!-- 当前列显示自定义组件，参考elementui的表格组件
        v-model="scope.row.showStatus":绑定哪个值为开和关
        :active-value="1"：1为开
        :inactive-value="0"：0为关
        @change="updatebrandStatus(scope.row)"：绑定change事件，把整行数据传递到updatebrandStatus方法中
        -->
        <template slot-scope="scope">
          <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>
        </template>
      </el-table-column>

methods:

    // 定义修改状态的方法
    updatebrandStatus(data) {
      console.log("当前值：", data.showStatus, data.brandId);
      // 组装成要修改的对象 品牌id和状态值
      var updatedata = {
        brandId: data.brandId,
        showStatus: data.showStatus
      };
      //发送修改请求
      this.$http({
        url: this.$http.adornUrl("/product/brand/update"),
        method: "post",
        data: this.$http.adornData(updatedata, false),
        //修改成功的调用
      }).then(({ data }) => {
        this.$message({
          message: "品牌状态修改成功",
          type: "success",
        });
      });
    },

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody BrandEntity brand){
        System.out.println(brand.toString());
		brandService.updateById(brand);

        return R.ok();
    }