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

最新推荐文章于 2024-07-26 15:30:45 发布

原创最新推荐文章于 2024-07-26 15:30:45 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

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

谷粒商城专栏收录该内容

150 篇文章

订阅专栏

本文档详细介绍了如何在Vue项目中优化表格显示状态，将原本的文本状态改为开关样式，并通过添加`active-value`和`inactive-value`属性简化数据处理。同时，展示了如何在切换开关时调用后台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>