elementUI点击当前行更改当前行状态(数据更新DOM不更新问题解决)

这篇具有很好参考价值的文章主要介绍了elementUI点击当前行更改当前行状态(数据更新DOM不更新问题解决)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<template slot-scope="{row,$index}" slot="menu">
    <el-button v-if="row.editable" type="text" size="small" @click="changeStatus(row,$index)">编辑</el-button>
    <el-button v-else type="text" size="small" @click="changeStatus(row,$index)">保存</el-button>
</template>



import { cloneDeep } from "lodash";

changeStatus(row,index){
	let item = cloneDeep(this.dataList[index]);// let item = this.dataList[index];//注意直接 这么写不生效,地址内存空间不变
	item.editable = !row.editable
	this.$set(this.dataList,index,item)//注意这句不能省略
},

cloneDeep:在很多情况下,我们都需要给变量赋值,给内存地址赋予一个值,但是在赋值引用值类型的时候,只是共享一个内存区域,导致赋值的时候,还跟之前的值保持一致性。文章来源地址https://www.toymoban.com/news/detail-634244.html

到了这里,关于elementUI点击当前行更改当前行状态(数据更新DOM不更新问题解决)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue + Element UI 实现复制当前行数据功能及解决复制到新增页面组件值不更新的问题

    Vue + Element UI 实现复制当前行数据功能及解决复制到新增页面组件值不更新的问题 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:AIGC人工智能 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技

    2024年02月04日
    浏览(45)
  • elementUI Table 表格编辑数据后停留当前位置

    后台管理系统在实际开发中,表格如果在一定高度出现滚动条。 这时如果对表格行数据进行编辑或者拖拽排序操作,数据刷新后滚动条会默认回到顶部,这样体验会不太好。 如果想保留在当前位置可以这样操作: table表格出现滚动条渲染的结构和样式  

    2023年04月18日
    浏览(38)
  • 解决elementUI或elementPlus的按钮点击后需要失去焦点才能恢复原本样式问题

    废话不多说直接上代码,只需要在button中添加如下代码即可

    2024年01月22日
    浏览(48)
  • elementui 中,点击按钮获取table中一行的数据

    在 element-ui 中,你可以通过为表格的行绑定单击事件来获取表格中的一行数据。 首先,在你的 template 中,你可以为表格的每一行添加一个点击事件,如下所示: 然后,在你的 script 中,你可以在 methods 中定义一个 handleRowClick 方法,用于处理行点击事件,该方法将接收一个参

    2024年02月11日
    浏览(37)
  • 微信小程序:表格中更改输入框的值,实时获取表格全部数据,点击按钮更改数据库指定项数据

    样例: 样式展示 数据库中原始第一条数据  修改表格第一行的数量: 数据库结果     核心代码 wxml ①wx:for:执行循环将数组数据展示出来 ②在某一单元格加上input样式 ③在input中绑定:文本框改变事件,并且绑定data-index便于知道改变的具体是哪一行的数据 wxss js ①变更in

    2024年02月16日
    浏览(49)
  • vue-pc端elementui-统一修改问题-Dialog 对话框点击空白关闭问题-element-所有组件层级问题

    实际开发我们经常发现dialog弹出框默认点击遮罩层空白地方就会关闭-有属性可以关闭 但是经常会图方便-或者已经写完了,不想一个个写,可以在main.js进行统一关闭 当我们在页面进行复杂设计和层级关闭改变,会发现右上角的退出登录弹出款在我们页面之下 这是我们不管怎

    2024年02月13日
    浏览(42)
  • Android问题笔记 -如何实现代码控制自动旋转开关的变更以及当前状态

    专栏分享 点击跳转=Unity3D特效百例 点击跳转=案例项目实战源码 点击跳转=游戏脚本-辅助自动化 点击跳转=Android控件全解手册 点击跳转=Scratch编程案例 点击跳转=软考全系列 众所周知,人生是一个漫长的流程,不断 克服困难 ,不断反思前进的过程。在这个过程中会产生很多对

    2024年02月08日
    浏览(44)
  • vue数据更新但视图(DOM)不刷新解决办法

    第一种:强制更新dom 第二种:vue.$set(要操作的对象或数组, 对象key/索引, 修改后的值) 第三种: vue.$forceUpdate() 对此有什么疑问 或者 其它前端面临的问题都可以来欢迎评论  在下知道的定会帮你回答希望能够帮到你 (#^.^#)

    2024年02月11日
    浏览(36)
  • ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作

    在写项目时,老师通过向后端发请求获得表格原来的数据来填充修改表单里的数据。 这是表格: 这是点击修改按钮后显示出来的修改表单: 但本地里都已经有这些数据了,就没必要再发一次请求,徒增服务器压力。 准备 可是该怎么获得当前行的数据填充上去呢?答案在

    2023年04月23日
    浏览(48)
  • DOM元素之更改

    通常改变元素涉及三个内容 动态改变元素中的内容 动态改变元素的CSS属性值 改变元素节点的属性 改变元素中的内容可以使用两个相关属性 innerHTML 和 innerText innerHTML 属性可以按照HTML语法设置内容,并且浏览器可以正常按照HTML语法渲染 innerText 属性只能以纯文本的形式设置节

    2024年02月01日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包