删除:

在列表页面,如果想删除一个item,原本要做很多事:

  1. 弹出删除确认框
  2. 弹出loading
  3. 调用clientDB的js api删除云端数据
  4. 接收云端删除结果,如果成功则关闭loading
  5. 进一步删除列表的data中对应的item,自动刷新页面

为减少重复开发,unicloud-db组件提供了remove方法,在列表渲染时绑定好index,直接调用remove方法即可一行代码完成上述5步。
首先在列表生成的时候给删除按钮绑定好id:

  1. <unicloud-db ref="udb" :collection="collectionName" v-slot:default="{data,pagination,loading,error}">
  2. <uni-table :loading="loading" :emptyText="error.message || '没有更多数据'" border stripe >
  3. <uni-tr>
  4. <uni-th>用户名</uni-th>
  5. <uni-th>操作</uni-th>
  6. </uni-tr>
  7. <uni-tr v-for="(item,index) in data" :key="index">
  8. <uni-th>{{item.username}}</uni-th>
  9. <uni-td>
  10. <view>
  11. <button @click="confirmDelete(item._id)" type="warn">删除</button>
  12. </view>
  13. </uni-td>
  14. </uni-tr>
  15. </uni-table>
  16. </unicloud-db>

然后confirmDelete方法里面只有一行代码:

  1. confirmDelete(id) {
  2. this.$refs.udb.remove(id)
  3. }

注意:clientDB组件的remove方法的参数只支持传入数据库的_id进行删除,不支持其他where条件删除。
参数传入的_id支持单个,也支持多个,即可以批量删除。多个id的格式是:

  1. this.$refs.udb.remove(["5f921826cf447a000151b16d", "5f9dee1ff10d2400016f01a4"])

完整实例,remove可选参数。

  1. var ids = ["5f921826cf447a000151b16d", "5f9dee1ff10d2400016f01a4"]
  2. this.$refs.udb.remove(ids, {
  3. action: '', // 删除前后的动作
  4. confirmTitle: '提示', // 确认框标题
  5. confirmContent: '是否删除该数据', // 确认框内容
  6. success: (res) => { // 删除成功后的回调
  7. const { code, message } = res
  8. },
  9. fail: (err) => { // 删除失败后的回调
  10. const { message } = err
  11. },
  12. complete: () => { // 完成后的回调
  13. }
  14. })

也可以通过clientDB API的方式直接调用添加函数,而不再需要用ref引用来获得对象。
代码块简写为cdb:

  1. methods:{
  2. submit(){
  3. }
  4. }

注意:

  • 如果列表分页采取分页组件,即page-data值为replace,每页有固定数量,那么clientDB组件的remove方法删除数据后,会重新请求当前页面数据。
  • 如果列表采取滚动加载方式,即page-data值为add,滚动加载下一页数据,那么clientDB组件的remove方法删除数据后,不会重新请求数据,而是从已有数据移除已删除项。(组件版本1.1.0+支持)

    服务端云函数中的删除

    删除文档

    方式1 通过指定文档ID删除
    不知道为什么这种方法无法正常删除,推荐用方式2中的指令匹配删除
    1. // 清理全部数据
    2. let res = await collection.get()
    3. res.data.map(async(document) => {
    4. return await collection.doc(document.id).remove();
    5. });
    方式2 条件查找文档然后直接批量删除 ```javascript // 删除字段a的值大于2的文档 const dbCmd = db.command let res = await collection.where({ a: dbCmd.gt(2) }).remove()

// 清理全部数据 const dbCmd = db.command let res = await collection.where({ _id: dbCmd.exists(true) //删除所有存在_id属性的字段 }).remove()

  1. 响应参数
  2. | **字段** | **类型** | **必填** | **说明** |
  3. | --- | --- | --- | --- |
  4. | deleted | Number | | 删除的记录数量 |
  5. 示例:判断删除成功或失败,打印删除的记录数量
  6. ```javascript
  7. const db = uniCloud.database();
  8. db.collection("table1").doc("5f79fdb337d16d0001899566").remove()
  9. .then((res) => {
  10. console.log("删除成功,删除条数为: ",res.deleted);
  11. })
  12. .catch((err) => {
  13. console.log( err.message )
  14. })
  15. .finally(() => {
  16. })