谷粒商城day42 -商品服务-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>