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

相关推荐
W.A委员会6 分钟前
地址栏输入url到显示画面
前端·网络
凯小默7 分钟前
08.with、eval、严格模式、面向对象、属性描述符
javascript
睡不着的可乐8 分钟前
Math对象
javascript
xuankuxiaoyao9 分钟前
Vue.js实践-组件基础上
前端·javascript·vue.js
甄心爱学习10 分钟前
【项目实训】法律文书智能摘要系统3
前端·人工智能
冲浪中台13 分钟前
从追逐技术到回归业务本质,吃互联网红利罢了
服务器·前端·人工智能·低代码
小马_xiaoen18 分钟前
前端虚拟列表(Virtual List)从原理到实战:海量数据渲染终极方案
前端·数据结构·list
M ? A40 分钟前
你的 Vue 3 响应式状态,VuReact 如何生成 React Hooks 依赖数组?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
FlyWIHTSKY44 分钟前
HTML 中 `<span>` 和 `<div>` 详细对比
前端·html
competes1 小时前
React.js JavaScript前端技术脚本运行框架。程序员进行研发组项目现场工作落地的一瞬之间适应性恒强说明可塑性强度达到应用架构师的考核标准
前端·javascript·人工智能·react.js·java-ee·ecmascript