谷粒商城实战笔记-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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这段代码使用了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
                })
              }
            })
          },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这段代码定义了一个名为 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的值。