总结一些vue3小知识2

news2024/12/27 11:13:09

1.el-tree-select和el-tree组件报错(有的下拉选项选择不了,一点击就报错,但是有的却能选择,不会报错)

原因:就如同v-for一样,需要添加key才不会出现渲染错误,而el-tree-select和el-tree组件需要添加node-key属性(每个树节点用来作为唯一标识的属性,整棵树应该是唯一的)

2.在弹出框中的输入框、单选按钮出现输入不了,但是在下一次打开时,输入框却显示上一次输入的值

原因:没有数据没有跟着响应,是ddSaleForm 变量没有用ref或者reactive的原因,以下是出现该问题的变量 const addSaleForm = {salesperson:"", userName:"", remarks:""},所以添加ref就可解决该问题

3.表格编辑和保存按钮对立显示/隐藏

<el-table :data="salespersonTableData" border  height="55vh" scrollbar-always-on>
    <el-table-column fixed="left" type="index" width="80" label="序号" />
    <el-table-column fixed="left" label="操作" width="150">
      <template #default="{ row }">
          <el-button style="color: #ff3535" class="operate" text @click="deleteBtn(row)" >删除</el-button>
          <el-button style="color: #3592FF" class="operate" text @click="row.isEdit=true" v-if="!row.isEdit">编辑</el-button>
          <el-button style="color: #3592FF" class="operate" text @click="saveUpdata(row)" v-else>保存</el-button>
          <el-button style="color: #3592FF" class="operate" text @click="getSalepersonList(),getUserOptions()" v-if="row.isEdit">取消</el-button>
      </template>
    </el-table-column>
    <div>以下省略一万条代码</div>
</el-table>

说明:实现该功能的代码关键点在于给row添加一个显示/隐藏的标识(isEdit);在保存的方法中同样通过给传参添加isEdit属性就可以隐藏保存按钮而显示编辑按钮;取消按钮是直接调用获取列表接口的方法就刷新列表就可以隐藏取消按钮而显示编辑按钮了

4.in的使用

在JavaScript中,in运算符用于检查一个对象是否拥有某个属性。它的语法是prop in object,其中prop是你想要检查的属性名(可以是字符串或者符号),object是你想要检查的对象。

如果object拥有名为prop的自身属性或者继承属性,那么表达式prop in object会返回 true。否则,它会返回 false

let obj = { a: 1, b: 2 };
console.log('a' in obj); // 输出:true
console.log('c' in obj); // 输出:false

5.如何获取请求标头中响应标头的属性值(Content-Disposition和Content-Type)

Content-Type是可以直接获取,而Content-Disposition和其他属性需要后端先进行设置才能获取;

这里获取的时候需要小写

fn(data).then((res) => { // 后端接口
  console.log(res.headers['content-type'],res.headers['content-disposition']);
}

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

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

相关文章

MySQL数据库 DCL

目录 DCL概述 管理用户 权限控制 DCL概述 DCL英文全称是Data Control Language(数据控制语言)&#xff0c;用来管理数据库用户、控制数据库的访 问权限。 管理用户 (1) 查询用户 select * from mysql.user; 查询的结果如下: 其中 Host代表当前用户访问的主机, 如果为localh…

计算机组成原理-指令系统CISC和RISC

文章目录 总览CISC和RISC 总览 CISC和RISC 存储程序就是用一个电路再加上存储部件构成 可访存指令不同 RISC更自由&#xff0c;因为很多函数没有固定&#xff0c;是自己写的 由于CISC各个指令执行时间不一样&#xff0c;要实现指令流水线比较困难 由于CISC可访存指令没有限制…

LVS负载均衡群集,熟悉LVS的工作模式,了解LVS的调度策略以及ipvsadm工具的命令格式

目录 一、什么是群集 群集的作用&#xff1a; 群集的目的是什么 根据群集所针对的目标差异&#xff0c;可分为三种类型 负载均衡群集&#xff08;LBC&#xff09;load balance cluster 高可用群集&#xff08;HAC&#xff09;high availability cluster 高性能运算群集&a…

【Docker】5. Dockerfile 构建和管理容器化应用程序

▒ 目录 ▒ &#x1f6eb; 导读开发环境 1️⃣ Dockerfile介绍 基本语法 指令 2️⃣ 实战&#xff1a;Python 的 Flask Web 代码 编译运行 发布到服务器 &#x1f6ec; 文章小结&#x1f4d6; 参考资料 &#x1f6eb; 导读 开发环境 版本号描述文章日期2023-12-15操作系统…

Dagger2基本使用2之子组件

一&#xff0c;基本使用&#xff0c;完成一个注入 1&#xff0c;创建作用域 //自定义作用域&#xff0c;作用域只是一个名称&#xff0c;随便起啥名字都可以&#xff0c;这里取一个全局单利的名字 Scope Documented Retention(RUNTIME) public interface GlobalSingleton { }…

LVS负载均衡器(DR模式)+nginx七层代理+tomcat多实例+php+mysql 实现负载均衡以及动静分离、数据库的调用!!!

目录 前言 一、nfs共享存储&#xff0c;为两个节点服务器提供静态网页共享 二、nginx作为lvs的后端节点服务器&#xff0c;完成lo:0网卡配置&#xff0c;以及内核参数设置&#xff0c;还有设置路由表 步骤一&#xff1a;先完成nfs共享存储挂载 步骤二&#xff1a;完成lo:0网…

QT----第三天,Visio stdio自定义封装控件,鼠标事件,定时器,事件分发器过滤器,绘图事件

目录 第三天1 自定义控件封装2 QT鼠标事件3 定时器4 event事件分发器5 事件过滤器6 绘图事件Qpainter 源码&#xff1a;CPP学习代码 第三天 1 自定义控件封装 新建一个QT widgetclass&#xff0c;同时生成ui,h,cpp文件 在smallWidget.ui里添加上你想要的控件并调试大小 回到…

Linux下MySQL的安装部署

MySQL数据库存在多种版本&#xff0c;不同的版本在不同的平台上&#xff08;OS&#xff0c;也就是操作系统上&#xff09;安装方式可能有所不同&#xff0c;因此安装时一定要参数官方文档进行安装。 MySQL :: MySQL Documentation 选择需要的MySQL官方提供的不同版本&#xff0…

【谭浩强C语言】导言-C知识点汇总

一、初衷 C语言基本是各大院校工科必修课&#xff0c;C语言也是单片机、嵌入式系统的基础开发语言&#xff0c;很多老师们都各显神通的把C语言精讲地很到位&#xff0c;咱们CSDN的技能树也提供了很棒的学习平台。那么&#xff0c;为什么还是打算开个专栏再整理整理呢&#xff…

Kubernetes实战(十四)-k8s高可用集群扩容master节点

1 单master集群和多master节点集群方案 1.1 单Master集群 k8s 集群是由一组运行 k8s 的节点组成的&#xff0c;节点可以是物理机、虚拟机或者云服务器。k8s 集群中的节点分为两种角色&#xff1a;master 和 node。 master 节点&#xff1a;master 节点负责控制和管理整个集群…

对自己的博客网站进行DOS攻击

对自己的博客网站进行DOS攻击 先说明一点,别对别人的网站进行ddos/dos攻击(dos攻击一般短时间攻击不下来),这是违法的,很多都有自动报警机制,本篇博客仅用于学习,请勿用于非法用途 安装kaili Linux 进入KALI官网,下载iso镜像文件 vmware新建虚拟机,选择自定义 点击下一步 …

LeetCode2961双模幂运算(相关话题:快速幂)

题目描述 给你一个下标从 0 开始的二维数组 variables &#xff0c;其中 variables[i] [ai, bi, ci, mi]&#xff0c;以及一个整数 target 。 如果满足以下公式&#xff0c;则下标 i 是 好下标&#xff1a; 返回一个由 好下标 组成的数组&#xff0c;顺序不限 。 示例 &…

《面向机器学习的数据标注规程》摘录

说明&#xff1a;本文使用的标准是2019年的团体标准&#xff0c;最新的国家标准已在2023年发布。 3 术语和定义 3.2 标签 label 标识数据的特征、类别和属性等。 3.4 数据标注员 data labeler 对待标注数据进行整理、纠错、标记和批注等操作的工作人员。 【批注】按照定义…

加权准确率WA,未加权平均召回率UAR和未加权UF1

加权准确率WA&#xff0c;未加权平均召回率UAR和未加权UF1 1.加权准确率WA&#xff0c;未加权平均召回率UAR和未加权UF12.参考链接 1.加权准确率WA&#xff0c;未加权平均召回率UAR和未加权UF1 from sklearn.metrics import classification_report from sklearn.metrics impor…

响应者链概述

响应者链 iOS事件的3大类型 Touch Events(触摸事件)Motion Events(运动事件&#xff0c;比如重力感应和摇一摇等)Remote Events(远程事件&#xff0c;比如用耳机上得按键来控制手机) 触摸事件 处理触摸事件的两个步骤 寻找事件的最佳响应者事件的响应在响应链中的传递 寻…

MAC上配置esp32的开发环境

1、安装Thonny. 2、你需要一块ESP32开发板。MicroPython支持ESP32芯片本身&#xff0c;从而可运行于任何一块搭载ESP32 芯片的开发板上。改板子的主要特征在于GPIO针脚是连接外界的&#xff0c;并且它包含了一个内置的 USB串口转换器&#xff0c;该转换器可以使你的电脑通过UAR…

springboot——定时任务、异步任务

springboot——定时任务、异步任务 一、定时任务1、创建一个定时任务、时间配置文件2、springboot主程序开启定时任务 EnableScheduling3、使用 Scheduled 注解 二、定时任务、异步执行。1、springboot主程序开启异步任务 EnableAsync2、方法上增加 Async 注解&#xff0c;标识…

谷歌浏览器标签页显示内存使用率

Chrome 桌面浏览器的新更新现在可让您查看每个标签页占用了多少内存&#xff0c;这可以帮助您确定哪些标签页占用了多少内存&#xff0c;网站正在减慢您笔记本电脑的速度。 今年早些时候在 Google Chrome 中引入内存节省程序之后&#xff0c;Google 又发布了一项功能&#xff…

深入理解CI/CD与Docker集成:自动化构建和部署的完整指南

在当今软件开发的快节奏环境中&#xff0c;自动化构建和部署是实现敏捷开发和DevOps实践的关键。Docker容器技术为这一过程引入了更高的灵活性和一致性。本文将深入研究如何将持续集成/持续部署&#xff08;CI/CD&#xff09;与Docker集成&#xff0c;提供更详细、实用的示例代…

直接插入排序_希尔排序

文章目录 直接插入排序原理步骤视频演示代码实现特性 希尔排序原理步骤图像演示代码实现希尔排序的分析特性 直接插入排序和希尔排序的比较 直接插入排序 直接插入排序&#xff08;Straight InsertionSort&#xff09;是一种最简单的排序方法&#xff0c;其基本操作是将一条记录…