ui组件库table常见坑

vue无法检测变动数组

问题描述

我们想改变table中第一条数据的值，通过this.list[0]=newValue这样是不会生效的。

解决方法

假设大家都是使用插槽slot，通过row得知视图上的数据所属

1. JavaScript Array unshift(item1, item2, …, itemX)
2. JavaScript Array splice(index, howmany, item1, …, itemX)

//添加数据
list.unshift(this.temp);

//删除数据 
const index = list.indexOf(row); //找到要删除数据在list中的位置
list.splice(index, 1); //通过splice 删除数据

//修改数据
let data = "xxx" // 修改的数据
const index = list.indexOf(row); //找到修改的数据在list中的位置
list.splice(index, 1, data); //通过splice 替换数据 触发视图更新

在dialog里面改变状态的时候，table数据也在改变,并且很容易被观察到。

原因

两者同时指定着同一个引用。

解决方法

重新指向一个引用

//赋值对象是一个obj
let NewObj=Object.assign({}, row) // 这样就不会共用同一个对象

//数组我们也有一个巧妙的防范
let newList = oldList.slice(); // 利用slice()方法clone并返回一个新数组