How to update data in a list or table component-Low-Code Development Platform(Mobi)-阿里云帮助中心

Delete a row from an existing list or table.

Important

Data for all object types, such as components and variables, cannot be directly modified. Do not use operations such as `pop`, `shift`, `splice`, `push`, or `unshift` to add or delete data. Use `setValue` or `setIn` instead.

Example

Variable as the data source

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

Frontend function as the data source

Filter the data on the frontend.

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} });

Delete

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

list_data.trigger();

Computed property as the data source

Filter the data on the frontend.

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} });`
Delete	`del_data.setValue([currentItem.id,...del_data.value]);`

Note

The difference between a computed property and a frontend function is that you do not need to manually call `trigger` for a computed property.

A computed property automatically updates when the variables it references change.

Integration operation as the data source

list_data

SELECT * from test

del_data

DELETE FROM test WHERE id = {{ delete_id }}

Delete

del_data.trigger({

"delete_id":currentItem.id

})

Implementation logic

Configure a data source for the table.
To modify the data, you must modify the corresponding data source.
Call `setValue` every time the data changes.
In the example, `list_data` is the data source. To remove an item, use `filter` to exclude it, and then call `setValue` to update the original object.
If the data is from an API, reload the data in the callback function after the delete operation is complete.

More operations

Add a confirmation button for deletion

Result

Implementation

var code =await mobi.showModal("Confirm Delete");

if(!code){
  return;
}

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

How to update data in a list or table component