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

相关推荐
Jinuss12 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海12 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手14 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪17 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪18 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__20 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工23 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主25 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat26 分钟前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee31 分钟前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能