表格单选回显

表格单选回显

import { nextTick, ref } from 'vue'
// onlyValue: table的row-key绑定的唯一值
export const useTableSingle = (onlyValue: any) => {
  const tableRef = ref()  //ref
  const tableData = ref<any>([]) // table数据
  const selectedData = ref<any>(null) // 存储选中的数据

  // 点击某一项时，触发
  const onSelect = (row: any, item: any) => {
    tableRef.value!.clearSelection()
    tableRef.value!.toggleRowSelection(item, undefined, false)
    selectedData.value = item
  }

  // 设置表格数据
  const setTableData = (data: any[]) => {
    tableData.value = data
    // 在数据加载完成后，尝试回显选中状态
    nextTick(() => {
      if (selectedData.value && tableData.value.length > 0) {
        const index = tableData.value.findIndex((item: any) => item[onlyValue] === selectedData.value[onlyValue])
        if (index !== -1) {
          tableRef.value!.toggleRowSelection(tableData.value[index], true)
        }
      }
    })
  }

  // 获取选中数据
  const getSelectedData = () => {
    return selectedData.value
  }

  // 清空选中状态
  const clearSelection = () => {
    selectedData.value = null
    tableRef.value!.clearSelection()
  }

  return {
    tableRef,
    onSelect,
    tableData,
    setTableData,
    getSelectedData,
    clearSelection
  }
}

/**
 * 0.css
  ::v-deep .el-table__header-wrapper .el-checkbox {
     display: none;
  }
 * 使用方法:
 * 1.引入 import { useTableSingle } from '~/src/hooks/useTableSingle'
 * 2.调用 const { onSelect, tableData, tableRef, setTableData, getSelectedData, clearSelection } = useTableSingle('唯一值')
 * 3.table定义:
 *   <el-table
 *     ref="tableRef"
 *     :data="tableData"
 *     @select="onSelect"
 *     row-key="绑定唯一值"
 *   >
 * 4.设置表格数据时使用 setTableData 方法:
 *   setTableData(表格数据)
 * 5.获取选中数据:
 *   const selectedData = getSelectedData()
 * 6.清空选中状态:
 *   clearSelection()
 */