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:在很多情况下,我们都需要给变量赋值,给内存地址赋予一个值,但是在赋值引用值类型 的时候,只是共享一个内存区域,导致赋值的时候,还跟之前的值保持一致性。

相关推荐
子玖2 分钟前
antd6的table排序功能
前端·react.js
程序员小李白21 分钟前
动画2详细解析
前端·css·css3
eason_fan29 分钟前
Rspack核心解析:Rust重写Webpack的性能革命与本质
前端·前端工程化
诗意地回家35 分钟前
淘宝小游戏反编译
开发语言·前端·javascript
徐同保35 分钟前
react两个组件中间加一个可以拖动跳转左右大小的功能
前端·javascript·react.js
爱迪斯通39 分钟前
MANUS:用于视觉、语言、行动模型创建的高保真第一人称数据采集设备
前端
bjzhang7542 分钟前
使用 HTML + JavaScript 实现在线知识挑战
前端·javascript·html
薛定谔的猫21 小时前
Cursor 系列(3):关于MCP
前端·cursor·mcp
sheji34161 小时前
【开题答辩全过程】以 基于web的拍卖系统设计与实现为例,包含答辩的问题和答案
前端
明月_清风1 小时前
模仿 create-vite / create-vue 风格写一个现代脚手架
前端·后端