列表或表格组件的数据如何更新

更新时间:2025-03-26 02:06:02

对已有列表进行删除行操作

重要

目前所有对象类型的数据(组件,变量),都不能直接进行增删操作,例如:pop、shift、splice、push、unshift,只能使用 setValue 或 setIn。

示例

数据源为变量

image

list_data.setValue(list_data.value.filter((a)=>a.id != currentItem.id))

数据源为前端函数

对数据进行前端过滤

image

del_data

[]

list_data

return [1,2,3,4,5,6,7,8,9,10].filter((a)=> del_data.value.findIndex(da =>da == a) == -1).map((item)=>{ return {"id":item} });

删除

del_data.setValue([currentItem.id,...del_data.value]);

list_data.trigger();

数据源为计算属性

对数据进行前端过滤

image

del_data

[]

list_data

return [1,2,3,4,5,6,7,8,9,10].filter((a)=> del_data.value.findIndex(da =>da == a) == -1).map((item)=>{ return {"id":item} });

删除

del_data.setValue([currentItem.id,...del_data.value]);
说明

计算属性与前端函数的区别在于,计算属性不需要手动调用 trigger 。

计算属性会随着内部变量引用变更而生效的。

数据源为集成操作

image

list_data

SELECT * from test

image

del_data

DELETE FROM test WHERE id = {{ delete_id }}

imageimage

删除

del_data.trigger({

"delete_id":currentItem.id

})

image

搭建的思路

  1. table 需要配置数据源

  2. 修改数据时,去修改对应的数据源

  3. 在每次数据变更都去 setValue

  4. 示例中,把 list_data 配置为数据源,在移除数据时,通过 filter 过滤掉对应的数据,重新 setValue 进入原始的对象中

  5. 如果数据是从 API 中获取的, 推荐这里调用删除之后,在回调中重新加载一次数据

更多操作

为删除增加确认按钮

效果

image

搭建,修改删除代码

image

var code =await mobi.showModal("确认删除");

if(!code){
  return;
}

del_data.trigger({
  "delete_id":currentItem.id
})

Table 组件如何变更行数据

表格组件 Table Item 的点击事件获取 currentItem 不达预期