当前位置: 首页 > news >正文

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

<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属性就可以隐藏保存按钮而显示编辑按钮;取消按钮是直接调用获取列表接口的方法就刷新列表就可以隐藏取消按钮而显示编辑按钮了

http://www.lryc.cn/news/258937.html

相关文章:

  • 【Excel设置动态图表】
  • 用 C 写一个卷积神经网络
  • 直面双碳目标,优维科技携手奥意建筑打造绿色低碳建筑数智云平台
  • docker 基础入门
  • HarmonyOS:NativeWindow 开发指导
  • 汉威科技传感器为农业加点“智慧”
  • springboot listener、filter登录实战
  • 【数据结构—栈的实现(数组栈)】
  • Linux安装Halo(个人网站)
  • Java - Spring中Bean的循环依赖问题
  • 使用 Python 实现简单的爬虫框架
  • Activiti七大接口,28张表详解
  • 解决msvcr120.dll文件丢失问题
  • AI日报:人工智能与新材料的发现
  • 鱼fish数据集VOC+yolo-1400张(labelImg标注)
  • 爬虫解析-BeautifulSoup-bs4(七)
  • 分类预测 | Matlab实现OOA-SVM鱼鹰算法优化支持向量机的多变量输入数据分类预测
  • 2.vue学习笔记(目录结构+模板语法+属性绑定)
  • Python基本语法及高级特性总结
  • 03-详解网关的过滤器工厂和常见的网关过滤器路由过滤器,默认过滤器,全局过滤器的执行顺序
  • 基于SSM的小儿肺炎知识管理系统设计与实现
  • HuffMan tree
  • 各地加速“双碳”落地,数字能源供应商怎么选?
  • 19.java绘图
  • 提升工作效率,尽在Microsoft Office LTSC 2021 for Mac!
  • day24_java的反射机制
  • VUE学习二、创建一个前端项目
  • 「红队笔记」靶机精讲:Prime1 - 信息收集和分析能力的试炼
  • JVM虚拟机系统性学习-对象的创建流程及对象的访问定位
  • perf与火焰图-性能分析工具