总结一些vue3小知识2

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.表格编辑和保存按钮对立显示/隐藏

html 复制代码
<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

javascript 复制代码
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和其他属性需要后端先进行设置才能获取;

这里获取的时候需要小写

javascript 复制代码
fn(data).then((res) => { // 后端接口
  console.log(res.headers['content-type'],res.headers['content-disposition']);
}
相关推荐
懒大王爱吃狼24 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果7 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰8 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式