写这篇是因为工作的时候遇到一个问题请看
一开始的时候 js是这样的
//访问后台拿到数据
getCheckPersonList({
page: this.page,
size: this.size,
}).then(resp => {
this.list = resp.data.list;
this.list.forEach(val => {
val.is_edit = false //先赋值为false 意思是框不显示
});
});
//改变编辑状态
handleChangeEdit(row){
row.is_edit = true;
console.log(row)
},
前端用插槽slot-scope控制
<template slot-scope="scope" width='200px'>
<div v-if="!scope.row.is_edit">
{{scope.row.is_edit}}
<el-button @click="handleChangeEdit(scope.row)" size="mini">
<i class="el-icon-edit" ></i>
</el-button>
</div>
<div v-else="scope.row.is_edit" style="display:inline-block">
<el-input style="width:50%" :value="scope.row.person_note" ></el-input>
</div>
</template>
效果如下
按照上面的代码,一开始scope的is_edit怎么都不会改变,但是在控制台输出row的时候发现里面的数据其实已经改变了,那么就只有一个问题,没有被监听到,找了很久找到一个大佬写的一段话:
顺序有问题,先赋值就是先监听,vue中直接为监听的对象新增一个属性,这个属性是不会被监听的,这时候需要用set处理。所以你这里对象的isEdit属性并没有被监听到,也就不会更新了。你这里不需要使用set,把下面的循环改下就可以了
也就是说,我在后台拿到数据的时候先赋值了,后面再插入一个is_edit的话其实就不会被监听到,所以改了下代码
getCheckPersonList({
page: this.page,
size: this.size,
}).then(resp => {
//注意这里几处地方 一个是把赋值跟插入新字段放到一起,这样这个is_edit就会被监听到
//第二个是把foreach换成了map
// this.list = resp.data.list;
this.list = resp.data.list.map(val => {
val.is_edit = false
return val
});
});
实现效果如下