谷粒商城实战笔记-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://xiahunao.cn/news/3267250.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

python基础巩固

基本数据类型 可以用isinstance来判断 a111 isinstance(a,int) True数值运算&#xff1a; >>> 2 / 4 # 除法&#xff0c;得到一个浮点数 0.5 >>> 2 // 4 # 除法&#xff0c;得到一个整数 0 >>> 17 % 3 # 取余 2Python 字符串不能被改变。向一个…

【LLM】-08-搭建问答系统-语言模型,提问范式与 Token

目录 1、语言模型 1.1、训练过程&#xff1a; 1..2、大型语言模型分类&#xff1a; 1.3、指令微调模型训练过程&#xff1a; 2、Tokens 3、Helper function辅助函数 (提问范式) 4、计算token数量 1、语言模型 大语言模型&#xff08;LLM&#xff09;是通过预测下一个词…

由bext安装“异常”引出的话题:windows上转义字符的工作原理

由bext安装“异常”引出的话题&#xff1a;Windows上转义字符的工作原理&#xff0c;与ai“闲扯”不经意学习知识点。 (笔记模板由python脚本于2024年07月25日 19:21:13创建&#xff0c;本篇笔记适合喜欢用ai学习的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff…

【Ubuntu】安装 Snipaste 截图软件

Snipaste 下载安装并使用 Snipastefor more information报错解决方案每次启动软件需要输入的命令如下添加开机自启动 下载 下载地址 安装并使用 Snipaste 进入终端输入命令 # 1、进入到 Snipaste-2.8.9-Beta-x86_64.AppImage 所在目录&#xff08;根据自己的下载目录而定&…

pythonGame-实现简单的贪食蛇游戏

通过python简单复现贪食蛇游戏。 使用到的库函数&#xff1a; import pygame import time import random 游戏源码&#xff1a; import pygame import time import randompygame.init()white (255, 255, 255) yellow (255, 255, 102) black (0, 0, 0) red (213, 50, 80…

数据结构(5):树和二叉树

1 树的定义 1.1 树的基本概念 分支可以称为边&#xff0c;结点可以用于存放数据结构。 除了根节点&#xff0c;其他节点只有一个前驱&#xff01;&#xff01;&#xff01;&#xff01; 互不相交也就是 只有一个前驱结点&#xff01; 树应用的很广的 1.2 结点之间的关系 直接…

DBeaver Ultimate 22.1.0 连接数据库(MySQL+Mongo+Clickhouse)

前言 继续书接上文 Docker Compose V2 安装常用数据库MySQLMongo&#xff0c;部署安装好之后我本来是找了一个web端的在线连接数据库的工具&#xff0c;但是使用过程中并不丝滑&#xff0c;最终还是选择了使用 DBeaver &#xff0c;然后发现 mongo 还需要许可&#xff0c;又折…

为什么idea建议使用“+”拼接字符串

今天在敲代码的时候&#xff0c;无意间看到这样一个提示&#xff1a; 英文不太好&#xff0c;先问问ChatGPT&#xff0c;这个啥意思&#xff1f; IDEA 提示你&#xff0c;可以将代码中的 StringBuilder 替换为简单的字符串连接方式。 提示信息中说明了使用 StringBuilder 进行…

专业视频拍摄与编辑SDK,定制专属视频解决方案

无论是社交媒体营销、产品展示、教育培训还是直播电商&#xff0c;高质量的视频内容都是吸引眼球、传递信息的关键。美摄科技&#xff0c;作为视频编辑处理领域的佼佼者&#xff0c;以其强大的视频拍摄与编辑SDK&#xff0c;为企业开启了视觉创意的新篇章。 【专业级功能&…

leetcode-148. 排序链表

题目描述 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4]示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输出&#xff1a;[-1,0,3,4,5]示例 3&#x…

2024钉钉杯A题思路详解

文章目录 一、问题一1.1 问题1.2 模型1.3 目标1.4 思路1.4.1 样本探究1.4.2 数据集特性探究&#xff1a;1.4.3 数据预处理1.4.4 数据趋势可视化1.4.5 ARIMA和LSTM两种预测模型1.4.6 参数调整 二、问题二2.1 问题2.2 模型2.3 目标2.4 思路2.4.1 样本探究2.4.2 数据集特性探究2.4…

电路学习——开关电源TL431(2024.07.21)

参考链接1: 【硬件学习笔记003】玩转电压基准芯片&#xff1a;TL431及其他常用电压基准芯片 参考链接2: TL431工作原理、经典应用电路、输出产生真的的原因分析 参考链接3: 如何确定开关电源TL431反馈回路的参数 参考链接4: 反激电源——TL431及光耦反馈电路计算&#xff08;不…

网络安全防御【IPsec VPN搭建】

目录 一、实验拓扑图 二、实验要求 三、实验思路 四、实验步骤&#xff1a; 修改双机热备的为主备模式&#xff1a; 2、配置交换机LSW6新增的配置&#xff1a; 3、防火墙&#xff08;FW4&#xff09;做相关的基础配置&#xff1a; 4、搭建IPsec VPN通道 &#xff08;1…

监控系列(八)部署dameng_exporter并对接prometheus

一、下载dameng_exporter采集器 官网地址&#xff1a;https://github.com/gy297879328/dameng_exporter DM数据库适配prometheus监控的采集器&#xff0c;目前已支持DM8数据库同时提供grafana 8.5.X 以上版本的监控面板&#xff08;其他的grafana版本需要自己绘制表盘&#x…

二十、Qt位置相关函数

目录 一、函数概述 二、函数实践 三、总结 一、函数概述 Qt 提供了很多关于获取窗体位置及显示区域大小的函数&#xff0c;如 x()、y()和 pos()、react()、size()、geometry()等&#xff0c;统称为“位置相关函数”或“位置函数”&#xff0c; 如下图所示是几种主要的位置函数…

模拟ADG主库归档文件丢失,备库出现gap(增量备份解决)

文章目录 一、说明二、环境信息2.1.主备库环境信息2.2.检查主备是否同步正常 三、模拟日志断档3.1.模拟主库归档文件丢失3.2 查看主库状态出现GAP 四、RMAN增量备份恢复备库同步4.1 RMAN增量恢复备库4.2 开启备库redo同步4.3 主备库验证同步 一、说明 模拟Oracle主库归档文件丢…

Encountered 1 file(s) that should have been pointers, but weren‘t:

https://stackoverflow.com/questions/71236993/git-lfs-cannot-discard-file-changes-encountered-files-that-should-have-been-poi 这个答案works

mysql查询语句优化

目录 1.背景 2.解读explain 2.1.id详解 1.id相同 2.id不相同 3.id有相同也有不相同 2.2.select_type详解 1.SIMPLE 2.PRIMARY 3.DERIVED 4.SUBQUERY 5.DEPEDENT SUBQUERY 6.UNCACHEABLE SUBQUERY 7.UNION 8.UNION RESULT 2.3.table详解 2.4.type详解 1.system…

HarmonyOs之 路由简单跳转

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行&#xff0c;每个Navigation都需要创建并传入一个NavPathStack对象&#xff0c;用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。 Entry Component struct Index …

MySQL数据库练习(5)

1.建库建表 # 使用数据库 use mydb16_trigger;# 表格goods create table goods( gid char(8) primary key, name varchar(10), price decimal(8,2), num int);# 表格orders create table orders( oid int primary key auto_increment, gid char(10) not null, name varchar(10…