对已有列表进行删除行操作
目前所有对象类型的数据(组件,变量),都不能直接进行增删操作,例如:pop、shift、splice、push、unshift,只能使用 setValue 或 setIn。
示例
数据源为变量
list_data.setValue(list_data.value.filter((a)=>a.id != currentItem.id))
数据源为前端函数
对数据进行前端过滤
del_data |
|
list_data |
|
删除 |
|
数据源为计算属性
对数据进行前端过滤
del_data |
|
list_data |
|
删除 |
|
计算属性与前端函数的区别在于,计算属性不需要手动调用 trigger 。
计算属性会随着内部变量引用变更而生效的。
数据源为集成操作
list_data | SELECT * from test | |
del_data | DELETE FROM test WHERE id = {{ delete_id }} | |
删除 | del_data.trigger({ "delete_id":currentItem.id }) |
搭建的思路
table 需要配置数据源
修改数据时,去修改对应的数据源
在每次数据变更都去 setValue
示例中,把 list_data 配置为数据源,在移除数据时,通过 filter 过滤掉对应的数据,重新 setValue 进入原始的对象中
如果数据是从 API 中获取的, 推荐这里调用删除之后,在回调中重新加载一次数据
更多操作
为删除增加确认按钮
效果
搭建,修改删除代码
var code =await mobi.showModal("确认删除");
if(!code){
return;
}
del_data.trigger({
"delete_id":currentItem.id
})
Table 组件如何变更行数据
表格组件 Table Item 的点击事件获取 currentItem 不达预期
该文章对您有帮助吗?