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

文章目录

  • 一,显示状态列改为switch开关
  • 二,监听状态改变

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

build目录下下webpack.base.conf.js中,把createLintingRule方法中的代码注释掉。

在这里插入图片描述

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

brand.vue做如下修改

在这里插入图片描述

	<el-table-columnprop="showStatus"header-align="center"align="center"label="显示状态"><template slot-scope="scope"><i class="el-icon-time"></i><el-switchv-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-alignalign 属性分别设置表头和单元格内容的对齐方式。
    • label 属性设置列的标题文本。
  2. 作用域插槽 (<template slot-scope="scope">):

    • 允许在表格单元格内使用模板语法来动态渲染内容。
    • scope 对象包含了当前行的数据和其他相关信息。
  3. Vue.js 的双向数据绑定 (v-model):

    • 用于在 <el-switch> 组件和数据模型之间建立双向绑定。
    • 当用户改变开关的状态时,会自动更新绑定的数据模型。
  4. Element UI 的 <el-switch> 组件:

    • 提供了一个开关控件,用于切换布尔值。
    • 可以通过 active-colorinactive-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: 这个参数代表了要更新显示状态的那一行数据的对象。它至少包含 brandIdshowStatus 两个属性。
  2. 解构赋值:

    • 使用 ES6 的解构赋值语法从 row 对象中提取出 brandIdshowStatus 属性。
  3. HTTP 请求:

    • 使用 $http 方法发送一个 POST 请求到服务器端点 /product/brand/update
    • 请求体中包含了 brandIdshowStatus 两个参数,用于标识需要更新的品牌 ID 以及新的显示状态。
  4. 异步处理:

    • 使用 .then() 处理异步请求的成功回调。
    • 如果服务器返回的数据中 code0,则认为请求成功,并显示一条成功的提示消息。
    • 如果 code 不为 0,则认为请求失败,并显示错误消息。
  5. 更新数据列表:

    • 成功更新品牌状态后,调用 this.getDataList() 方法来重新加载数据列表,以反映最新的状态变化。

具体代码分析如下:

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

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/49104.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

昇思MindSpore学习总结十七 —— 基于MindSpore通过GPT实现情感分类

1、要求 2、导入了一些必要的库和模块 以便在使用MindSpore和MindNLP进行深度学习任务时能使用各种功能&#xff0c;比如数据集处理、模型训练、评估和回调功能。 import os # 导入操作系统相关功能的模块&#xff0c;如文件和目录操作import mindspore # 导入MindSpore库&a…

数据开发/数仓工程师上手指南(二)数仓构建分层概念

前言 回顾上篇文章我们可以用思维导图一遍概览&#xff1a; 在了解了数仓的基本架构之后&#xff0c;我们还需要掌握数仓构建方法&#xff0c;也就是了解数仓是如何建模的&#xff0c;有什么规则和通用方法。我们应该如何去构建一个性能良好、稳定高效、契合业务的数据仓库。…

图形/视图架构的坐标系

图形/视图架构有 3 个有效的坐标系&#xff1a;场景坐标系、视图坐标系、图形项坐标系。 视图坐标系 视图坐标系就是视图组件的物理坐标系&#xff0c;单位是像素。QGraphicsView 视口的左上角坐标总是(0,0)。 场景坐标系 场景坐标系定义了所有图形项的基础坐标&#xff0c;场…

如何排查GD32 MCU复位是由哪个复位源导致的?

上期为大家讲解了GD32 MCU复位包括电源复位和系统复位&#xff0c;其中系统复位还包括独立看门狗复位、内核软复位、窗口看门狗复位等&#xff0c;在一个GD32系统中&#xff0c;如果莫名其妙产生了MCU复位&#xff0c;如何排查具体是由哪个复位源导致的呢&#xff1f; GD32 MC…

Idea如何查看Maven依赖树

1、使用idea自带的功能查看依赖树 2、使用Maven Helper插件 https://zhuanlan.zhihu.com/p/699663369

《Milvus Cloud向量数据库指南》——监管机构和社区:开源许可证标准的守护者与推动者

在开源软件的浩瀚宇宙中,监管机构和社区构成了其稳定运行与持续发展的双轮驱动。这些组织不仅定义了开源的本质,还通过制定、维护和执行许可证标准,确保了开源生态的开放性、透明性和协作精神得以传承。其中,开源倡议组织(OSI)、自由软件基金会(FSF)以及Apache软件基金…

【STM32】IIC学习笔记

学习IIC 前言一、基础知识GPIO_WriteBit 写入高低电平 二、放代码三、逐行细读总结 前言 最近沉迷手写笔记~ 尝试解读江科大的IIC程序&#xff0c;结合笔记更理解IIC 一、基础知识 GPIO_WriteBit 写入高低电平 二、放代码 这个是江科大的软件IIC的设置部分 #include "s…

正点原子 通用外设配置模型 GPIO配置步骤 NVIC配置

1. 这个是通用外设驱动模式配置 除了初始化是必须的 其他不是必须的 2. gpio配置步骤 1.使能时钟是相当于开电 2.设置工作模式是配置是输出还是输入 是上拉输入还是下拉输入还是浮空 是高速度还是低速度这些 3 和 4小点就是读写io口的状态了 3. 这个图是正点原子 将GPIO 的时…

Axure设计之轮播图(动态面板+中继器)

轮播图&#xff08;Carousel&#xff09;是一种网页或应用界面中常见的组件&#xff0c;用于展示一系列的图片或内容&#xff0c;通常通过自动播放或用户交互&#xff08;如点击箭头按钮&#xff09;来切换展示不同的内容。轮播图能够吸引用户的注意力&#xff0c;有效展示重要…

全能数据分析工具:Tableau Desktop 2019 for Mac 中文激活版

Tableau Desktop 2019 一款专业的全能数据分析工具&#xff0c;可以让用户将海量数据导入并记性汇总&#xff0c;并且支持多种数据类型&#xff0c;比如像是编程常用的键值对、哈希MAP、JSON类型数据等&#xff0c;因此用户可以将很多常用数据库文件直接导入Tableau Desktop&am…

Django Web开发:构建强大RBAC权限管理系统的实战指南

文章目录 前言一、rbac 基于角色的权限管理1.acl 基于用户的权限管理2.rbac 基于角色的权限管理 二、应用示例1.配置角色资源a.分析表b.核心逻辑c.使用transfer在前端实现资源配置d.页面效果 2.登录时获取对应权限a.员工登录b.中间件c.前端请求d.效果图 3.前端-路由守卫-页面权…

GAT知识总结

《GRAPH ATTENTION NETWORKS》 解决GNN聚合邻居节点的时候没有考虑到不同的邻居节点重要性不同的问题&#xff0c;GAT借鉴了Transformer的idea&#xff0c;引入masked self-attention机制&#xff0c; 在计算图中的每个节点的表示的时候&#xff0c;会根据邻居节点特征的不同来…

解开基于大模型的Text2SQL的神秘面纱

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…

JAVA基础 - 对象

目录 一. 简介 二. 空对象 三. 构造方法 四. 析构方法 五. this关键字 六. 对象销毁 一. 简介 在 Java 中&#xff0c;对象&#xff08;Object&#xff09;是面向对象编程的核心概念。 对象是类的实例化&#xff0c;它将数据&#xff08;属性&#xff09;和操作这些数据…

【运算放大器】输入失调电压和输入偏置电流(2)实例计算

概述 根据上一篇文章的理论&#xff0c;分别计算没有输入电阻和有输入电阻两种情况下的运放总输出误差。例题来自于TI高精度实验室系列课程。 目录 概述实例计算 1&#xff1a;没有输入电阻实例计算 2&#xff1a;有输入电阻总结 实例计算 1&#xff1a;没有输入电阻 要求&am…

通过IEC104转MQTT网关对接阿里云、华为云、亚马逊AWS、ThingsBoard、Ignition、Zabbix

随着工业互联网的快速发展&#xff0c;传统电力系统中的IEC 104协议设备正逐步向更加开放、灵活的物联网架构转型。MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;作为一种轻量级的消息传输协议&#xff0c;因其低带宽消耗、高可靠性和广泛的支持性&#xf…

vue3前端开发-小兔鲜项目-路由拦截器增加token的携带

vue3前端开发-小兔鲜项目-路由拦截器增加token的携带&#xff01;实际开发中&#xff0c;很多业务接口的请求&#xff0c;都要求必须是登录状态&#xff01;为此&#xff0c;这个token信息就会频繁的被加入到了请求头部信息中。request请求头内既然需要频繁的携带这个token.我们…

集团ERP信息化项目实施方案(82页PPT)

集团ERP信息化项目实施方案的82页PPT详尽阐述了企业资源规划&#xff08;ERP&#xff09;系统实施的全过程&#xff0c;旨在帮助集团整合多个业务流程于一个统一的平台。方案从当前市场环境分析入手&#xff0c;解释了ERP系统对于提升集团运营效率、降低成本和优化资源配置的必…

【OpenCV C++20 学习笔记】图片融合

图片融合 原理实现结果展示完整代码 原理 关于OpenCV的配置和基础用法&#xff0c;请参阅本专栏的其他文章&#xff1a;垚武田的OpenCV合集 这里采用的图片熔合的算法来自Richard Szeliski的书《Computer Vision: Algorithms and Applications》&#xff08;《计算机视觉&#…

STM32是使用的内部时钟还是外部时钟

STM32是使用的内部时钟还是外部时钟&#xff0c;经常会有人问这个问题。 1、先了解时钟树&#xff0c;见下图&#xff1a; 2、在MDK中&#xff0c;使用的是HSEPLL作为SYSCLK&#xff0c;因此需要对时钟配置寄存器&#xff08;RCC_CFGR&#xff09;进行配置&#xff0c;寄存器内…