版本更新至2.11.5

Ben Lin

2024-06-18 ebbd788fbb2c0b45d4473798efc57eec8ba74a25

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import type { ComputedRef } from 'vue';
import type { BasicTableProps } from '../types/table';
import { unref } from 'vue';
import type { Key } from 'ant-design-vue/lib/table/interface';
 
import { parseRowKeyValue } from '../helper';
 
interface Options {
  setSelectedRowKeys: (keyValues: Key[]) => void;
  getSelectRowKeys: () => Key[];
  clearSelectedRowKeys: () => void;
  emit: EmitType;
  getAutoCreateKey: ComputedRef<boolean | undefined>;
}
 
export function useCustomRow(
  propsRef: ComputedRef<BasicTableProps>,
  { setSelectedRowKeys, getSelectRowKeys, getAutoCreateKey, clearSelectedRowKeys, emit }: Options,
) {
  const customRow = (record: Recordable, index: number) => {
    return {
      onClick: (e: Event) => {
        e?.stopPropagation();
        function handleClick() {
          const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef);
          if (!rowSelection || !clickToRowSelect) return;
          const keyValues = getSelectRowKeys() || [];
          const keyValue = parseRowKeyValue(rowKey, record, unref(getAutoCreateKey));
          if (!keyValue) return;
 
          const isCheckbox = rowSelection.type === 'checkbox';
          if (isCheckbox) {
            // 找到tr
            const tr = (e as MouseEvent)
              .composedPath?.()
              .find((dom) => (dom as HTMLElement).tagName === 'TR') as HTMLElement;
            if (!tr) return;
            // 找到Checkbox，检查是否为disabled
            const checkBox = tr.querySelector('input[type=checkbox]');
            if (!checkBox || checkBox.hasAttribute('disabled')) return;
            if (!keyValues.includes(keyValue)) {
              keyValues.push(keyValue);
              setSelectedRowKeys(keyValues);
              return;
            }
            const keyIndex = keyValues.findIndex((item) => item === keyValue);
            keyValues.splice(keyIndex, 1);
            setSelectedRowKeys(keyValues);
            return;
          }
 
          const isRadio = rowSelection.type === 'radio';
          if (isRadio) {
            if (!keyValues.includes(keyValue)) {
              if (keyValues.length) {
                clearSelectedRowKeys();
              }
              setSelectedRowKeys([keyValue]);
              return;
            }
            clearSelectedRowKeys();
          }
        }
        handleClick();
        emit('row-click', record, index, e);
      },
      onDblclick: (event: Event) => {
        emit('row-dbClick', record, index, event);
      },
      onContextmenu: (event: Event) => {
        emit('row-contextmenu', record, index, event);
      },
      onMouseenter: (event: Event) => {
        emit('row-mouseenter', record, index, event);
      },
      onMouseleave: (event: Event) => {
        emit('row-mouseleave', record, index, event);
      },
    };
  };
 
  return {
    customRow,
  };
}