谷粒商城day42 -商品服务-API-品牌管理-效果优化与快速显示开关

关注

原创最新推荐文章于 2022-02-23 11:47:58 发布 255 阅读 AI 写同款· GEO 优化 ›

谷粒商城基础篇——Day06 商品服务-API-品牌管理 一、使用逆向功能的前后端代码效果优化与快速显示开关云存储开通与使用 OSS整合测试 OSS获取服务端签名 OSS前后联调测试上传表单校验&自定义校验器 JSR303数据校验统一异常处理 JSR303分组校验 JSR303自定义校验注解概念-SPU&SKU&规格参数&销售属性商品服务-API-属性分组前端组件抽取&父子组件交互获取分类属性分组分组新增&级联选择器分组修改&级联选择器回显商品服务-API-品阅读详情

1.页面调整

(1)去掉蓝色部分

(2)label宽度太小

调成140

(2)显示状态改成开关样式

添加 active-value="1" 与 inactive-value="0" 为了方便

不然值还是true，false，数据库字段类型是数值型

<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"
            active-value="1"
            inactive-value="0"
            @change="changeStatus(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>

（3）添加方法

changeStatus(data) {
      var {brandId,showStatus} = data;
      this.$http({
        url: this.$http.adornUrl("/product/brand/update"),
        method: "post",
        data: this.$http.adornData({brandId,showStatus}, false),
      }).then(({ data }) => {});
    },

(4)测试成功

频繁的点击后台可以看到修改的sql语句

(5)新增修改框也添加开关

这里不用加模板标签

<el-form-item label="显示状态" prop="showStatus">
          <el-switch
            v-model="dataForm.showStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
      </el-form-item>

收录于