谷粒商城实战笔记-60-商品服务-API-品牌管理-效果优化与快速显示开关

文章目录

首先，把ESLint语法检查关掉，因为这个语法检查过于严格，在控制台输出很多错误信息，干扰开发。

在

build

目录下下

webpack.base.conf.js

中，把

createLintingRule

方法中的代码注释掉。

一，显示状态列改为switch开关

**对

brand.vue

做如下修改**。

<el-table-column
        prop="showStatus"
        header-align="center"
        align="center"
        label="显示状态"><template slot-scope="scope"><i class="el-icon-time"></i><el-switch
            v-model="scope.row.showStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"></el-switch></template></el-table-column>

这段代码使用了Element UI框架中的几个关键特性来定义一个表格列，并在其中嵌入了一个开关组件，允许用户改变表格行中的显示状态。

1. Element UI 的 <el-table-column> 组件:- 用于定义表格中的一列。- prop 属性指定表格列所绑定的数据属性名。- header-align 和 align 属性分别设置表头和单元格内容的对齐方式。- label 属性设置列的标题文本。
2. 作用域插槽 (<template slot-scope="scope">):- 允许在表格单元格内使用模板语法来动态渲染内容。- scope 对象包含了当前行的数据和其他相关信息。
3. Vue.js 的双向数据绑定 (v-model):- 用于在 <el-switch> 组件和数据模型之间建立双向绑定。- 当用户改变开关的状态时，会自动更新绑定的数据模型。
4. Element UI 的 <el-switch> 组件:- 提供了一个开关控件，用于切换布尔值。- 可以通过 active-color 和 inactive-color 属性自定义开关处于不同状态时的颜色。

对brand-add-or-update.vue做如下修改。

①

②

调整表单标签宽度。

二，监听状态改变

给el-switch绑定change事件，用以监听开关状态的变化。

监听事件代码如下。

    updateBrandStatus (row){
            let {brandId, showStatus }= row;
            this.$http({
              url: this.$http.adornUrl(`/product/brand/update`),
              method:'post',
              data:{
                brandId,
                showStatus
              }}).then(({data})=>{if(data && data.code ===0){
                this.$message({
                  type:'success',
                  message:'修改状态成功'})
                this.getDataList()}else{
                this.$message({
                  type:'error',
                  message: data.msg
                })}})},

这段代码定义了一个名为

updateBrandStatus

的方法，该方法用于更新品牌的显示状态。以下是该方法的关键特性：

1. 参数:- row: 这个参数代表了要更新显示状态的那一行数据的对象。它至少包含 brandId 和 showStatus 两个属性。
2. 解构赋值:- 使用 ES6 的解构赋值语法从 row 对象中提取出 brandId 和 showStatus 属性。
3. HTTP 请求:- 使用 $http 方法发送一个 POST 请求到服务器端点 /product/brand/update。- 请求体中包含了 brandId 和 showStatus 两个参数，用于标识需要更新的品牌 ID 以及新的显示状态。
4. 异步处理:- 使用 .then() 处理异步请求的成功回调。- 如果服务器返回的数据中 code 为 0，则认为请求成功，并显示一条成功的提示消息。- 如果 code 不为 0，则认为请求失败，并显示错误消息。
5. 更新数据列表:- 成功更新品牌状态后，调用 this.getDataList() 方法来重新加载数据列表，以反映最新的状态变化。

具体代码分析如下：

• 首先，通过解构赋值从 row 中获取 brandId 和 showStatus。
• 然后，使用 $http 发送一个 POST 请求到 /product/brand/update 端点，请求体包含了 brandId 和 showStatus。
• 成功响应后，检查 data 对象中的 code 是否为 0： - 如果 code 为 0，则表示成功更新，使用 Element UI 的 $message 方法显示一条成功提示，并重新加载数据列表。- 如果 code 不为 0，则显示错误消息。

这里，要特别说明的是，需要给el-switch指定actvie和inactive的值。