基于ts的多选表格删除、对象数组删除Hooks

我是红花啊

于 2024-09-27 16:13:33 发布

阅读量130

点赞数 6

文章标签：前端 vue.js typescript

本文链接：https://blog.csdn.net/weixin_44005110/article/details/142595576

版权

基于ts的多选表格删除、对象数组删除Hooks

此hooks 常用于表格多选表格删除，例如表格有10条数据，勾选删除其中3条，那么就用下面方法

用法

useListDel (tableData.value, selectTable.value, 'id')

具体实现

/**
 * @param list 列表数据
 * @param selectList 选中的数据
 * @param unique 唯一标识
 */
type arrType = Record<string, unknown>
export const useListDel = (
  list: arrType[],
  selectList: arrType[],
  unique: string
) => {
  const fieldArr = selectList.map((item) => item[unique])
  const indicesToRemove = []
  for (const [i, item] of list.entries()) {
    if (fieldArr.includes(item[unique])) {
      indicesToRemove.push(i)
    }
  }
  indicesToRemove
    .sort((a, b) => b - a)
    .forEach((index) => {
      list.splice(index, 1)
    })
}