表格数据多选回显

表格数据多选回显

import { ref } from 'vue'
// onlyValue: table的row-key绑定的唯一值
// echoData: 每次需要回显的数据
export const useTableEcho = (onlyValue: any) => {
  const arr = ref<any>([]) // 所有被勾选的数据存储
  const tableData = ref<any>([]) // 当前页表格数据
  const tableRef = ref() // 表格Ref
  const allTableList = ref<any>([]) // 存储表格所有数据

  // 单选
  const change = (selection: any, row: any) => {
    if (arr.value.some((item: any) => item === row[onlyValue])) {
      arr.value.splice(
        arr.value.findIndex((item: any) => item == row[onlyValue]),
        1
      )
    } else {
      arr.value.push(row[onlyValue])
    }
    arr.value = [...new Set(arr.value)]
  }

  // 多选
  const allChange = (selection: any) => {
    if (selection.length > 0) {
      arr.value = [...new Set([...arr.value, ...selection.map((item: any) => item[onlyValue])])]
    } else {
      tableData.value.filter((item: any) => {
        if (arr.value.includes(item[onlyValue])) {
          arr.value.splice(
            arr.value.findIndex((domain: any) => domain == item[onlyValue]),
            1
          )
        }
      })
    }
  }

  // 是否选中
  const toggleSelection = (rows?: any[]) => {
    if (rows) {
      rows.forEach((row) => {
        tableRef.value!.toggleRowSelection(row, undefined, false)
      })
    } else {
      tableRef.value!.clearSelection()
    }
  }

  // 计算统计回显数据
  const addEchoData = (echoData: any, flag?: boolean) => {
    if (echoData.value.length && flag) {
      echoData.value.forEach((item: any) => {
        arr.value.push(item[onlyValue])
      })
    }
  }
  // 获取所打开页面的所有数据,同时回显已选择的数据
  const addAllData = () => {
    nextTick(() => {
      tableData.value.forEach((item: any) => {
        if (!allTableList.value.some((domian: any) => domian[onlyValue] == item[onlyValue])) {
          allTableList.value.push(item)
        }
      })

      const newArr = tableData.value.filter((item: any) =>
        arr.value.filter((item1: any) => tableData.value.some((item2: any) => item1 === item2[onlyValue])).includes(item[onlyValue])
      )
      toggleSelection(newArr)
    })
  }

  // 所选中的数据 用于提交时给接口的参数
  const changeData = () => allTableList.value.filter((item: any) => arr.value.includes(item[onlyValue]))

  return {
    change,
    allChange,
    toggleSelection,
    arr,
    tableData,
    tableRef,
    addAllData,
    addEchoData,
    allTableList,
    changeData,
  }
}

/**
 * 使用方法:
 * 1.引入 import { useTableEcho } from '~/src/hooks/useTableEcho'
 * 2.调用 const { change, allChange, arr, tableData, tableRef, addAllData, addEchoData, allTableList, changeData } = useTableEcho('唯一值')
 * 3.table定义 ref="tableRef" :data="tableData" @select="change" @select-all="allChange" row-key="绑定唯一值"
 * 4.拉取列表时 调用addEchoData(需回显的数据, flag),统计回显数据
 * 5.统计回显数据后,异步调用,进行数据回显
      nextTick(() => {
        addAllData()
      })
 * 6.提交时,调用changeData() ,他会把你选中的数据返回给你  const a = changeData(),你传入后端即可
 * 7.与此hook相关的数据全部清空
     arr.value = []
     allTableList.value = []
     tableData.value = []
     tableRef.value!.clearSelection()
 */