前端用_.filter做table表格数据的假删除；涉及到scoped.$index

---

前言

在实际的开发中，我们常常会遇到这样一种情况，就是当你新增了一条数据渲染到表格后，还没点保存按钮没有调用到后端保存的接口，这时候我却因为某些原因要把这条数据删除掉，这时候这条数据是没有id的，我们在前端就会涉及到假删除操作。

---

一、假删除实现

1.表格渲染代码

下面的代码是表格数据，绑定一个tableData数据，其中在操作栏有个删除按钮，按钮中有个delete(scoped.$index, scoped.row.id)方法。
其中用到的scoped.$index，该属性用于记录选中的那行表格数据在这一页数据中的下标。

<div>
   <el-table :data="tableData">
      <el-table-column prop="userId"  label="用户ID" width="140" />
      <el-table-column prop="userName" label="用户名" width="140" />
      <el-table-column prop="userEmail" label="用户邮箱" width="140" />
      <el-table-column prop="" label="操作" width="200">
          <template #default="scoped">
            <el-button
              style="margin-left: 12px"
              type="danger"
              link
              @click="delete(scoped.$index, scoped.row.id)"
            >
              <i class="iconfont icon-bastrash"></i>删除
            </el-button>
          </template>
        </el-table-column>
   </el-table>
</div>

2.删除方法实现

代码如下（示例）：

function delete(index: number, id: string) {
  if (id) {
    proxy.$msgbox
      .confirm('是否删除此条数据？'), {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'error'
      })
      .then(() => {
      //如果存在id，说明是已经保存好，存在数据库的了，这种情况直接调用后端的删除接口
        deleteUserInfo(id).then((res) => {
          if (res.code === 200) {
            proxy.$message.success('删除成功！')
            getDetail()
          } else {
            proxy.$message.error('删除失败！')
          }
        })
      })
  } else {
  //如果不存在id，那么就用_filter函数做假删除
    const list = _.filter(tableData, (o, i) => i !== index)
    tableData.length = 0
    tableData.push(...list)
  }
}

我们先来看看_filter这个函数，.filter(collection, [predicate=.identity])
①collection (Array|Object): 一个用来迭代的集合
②[predicate=_.identity] (Array|Function|Object|string): 每次迭代调用的函数
③predicate（断言函数）调用三个参数：(value, index|key, collection)
其中可以看出const list = _.filter(tableData, (o, i) => i !== index)的i就是索引，o就是value。
其实假删除的逻辑原理就是：判断tableData所有数据的下标（i）和选中的那行数据在这一页表格中的下标（scoped.index），通过比较会发现当只有一条数据的时候它们下标都一样，过滤出来的list是空的，再重新把空的数据push给tableData，实现删除目的；当有多条数据的时候也一样，把tableData数据下标（i）和选中那行数据的下标（scoped.$index）不一样的数据过滤出来，实现点击删除按钮就删除当前数据。

假设只有一条数据，在这里再打印一下数据：

const list = _.filter(tableData, (o, i) => {
      console.log('value', o)
      console.log('index', i)
      console.log('scoped.$index', index)
    })

显示结果如下图所示

假设列表有三条数据，删除列表第三条数据，结果显示如下

---

总结

以上就是关于前端用_.filter比较下标做假删除的总结记录。