element-plus/es/components/table/src/table-body/render-helper.mjs.map

A Component Library for Vue 3

{"version":3,"file":"render-helper.mjs","names":["TdWrapper"],"sources":["../../../../../../../packages/components/table/src/table-body/render-helper.ts"],"sourcesContent":["import { computed, h, inject } from 'vue'\nimport { merge } from 'lodash-unified'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isBoolean, isPropAbsent } from '@element-plus/utils'\nimport { getRowIdentity } from '../util'\nimport { TABLE_INJECTION_KEY } from '../tokens'\nimport useEvents from './events-helper'\nimport useStyles from './styles-helper'\nimport TdWrapper from './td-wrapper.vue'\n\nimport type { TableBodyProps } from './defaults'\nimport type {\n  DefaultRow,\n  RenderRowData,\n  Table,\n  TableColumnCtx,\n  TableProps,\n  TreeNode,\n} from '../table/defaults'\nimport type { TreeData } from '../store/tree'\nimport type { TableOverflowTooltipOptions } from '../util'\n\nfunction useRender<T extends DefaultRow>(props: Partial<TableBodyProps<T>>) {\n  const parent = inject(TABLE_INJECTION_KEY) as Table<T>\n  const ns = useNamespace('table')\n  const {\n    handleDoubleClick,\n    handleClick,\n    handleContextMenu,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleCellMouseEnter,\n    handleCellMouseLeave,\n    tooltipContent,\n    tooltipTrigger,\n  } = useEvents(props)\n  const {\n    getRowStyle,\n    getRowClass,\n    getCellStyle,\n    getCellClass,\n    getSpan,\n    getColspanRealWidth,\n  } = useStyles(props)\n\n  let displayIndex = -1\n\n  const firstDefaultColumnIndex = computed(() => {\n    return props.store?.states.columns.value.findIndex(\n      ({ type }) => type === 'default'\n    )\n  })\n  const getKeyOfRow = (row: T, index: number) => {\n    const rowKey = (parent?.props as Partial<TableProps<T>>)?.rowKey\n    if (rowKey) {\n      return getRowIdentity(row, rowKey)\n    }\n    return index\n  }\n  const rowRender = (\n    row: T,\n    $index: number,\n    treeRowData?: TreeNode,\n    expanded = false\n  ) => {\n    const { tooltipEffect, tooltipOptions, store } = props\n    const { indent, columns } = store!.states\n    const rowClasses = []\n    let display = true\n    if (treeRowData) {\n      rowClasses.push(ns.em('row', `level-${treeRowData.level}`))\n      display = !!treeRowData.display\n    }\n    if ($index === 0) {\n      displayIndex = -1\n    }\n    if (props.stripe && display) {\n      displayIndex++\n    }\n    rowClasses.push(...getRowClass(row, $index, displayIndex))\n    const displayStyle = display ? null : { display: 'none' }\n    return h(\n      'tr',\n      {\n        style: [displayStyle, getRowStyle(row, $index)],\n        class: rowClasses,\n        key: getKeyOfRow(row, $index),\n        onDblclick: ($event: Event) => handleDoubleClick($event, row),\n        onClick: ($event: Event) => handleClick($event, row),\n        onContextmenu: ($event: Event) => handleContextMenu($event, row),\n        onMouseenter: () => handleMouseEnter($index),\n        onMouseleave: handleMouseLeave,\n      },\n      columns.value.map((column, cellIndex) => {\n        const { rowspan, colspan } = getSpan(row, column, $index, cellIndex)\n        if (!rowspan || !colspan) {\n          return null\n        }\n        const columnData = Object.assign({}, column)\n        columnData.realWidth = getColspanRealWidth(\n          columns.value,\n          colspan,\n          cellIndex\n        )\n        const data: RenderRowData<T> = {\n          store: store!,\n          _self: props.context || parent!,\n          column: columnData,\n          row,\n          $index,\n          cellIndex,\n          expanded,\n        }\n        if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {\n          data.treeNode = {\n            indent: treeRowData.level && treeRowData.level * indent.value,\n            level: treeRowData.level,\n          }\n          if (isBoolean(treeRowData.expanded)) {\n            data.treeNode.expanded = treeRowData.expanded\n            // 表明是懒加载\n            if ('loading' in treeRowData) {\n              data.treeNode.loading = treeRowData.loading\n            }\n            if ('noLazyChildren' in treeRowData) {\n              data.treeNode.noLazyChildren = treeRowData.noLazyChildren\n            }\n          }\n        }\n        const baseKey = `${getKeyOfRow(row, $index)},${cellIndex}`\n        const patchKey = columnData.columnKey || columnData.rawColumnKey || ''\n        const mergedTooltipOptions =\n          column.showOverflowTooltip &&\n          merge(\n            {\n              effect: tooltipEffect,\n            },\n            tooltipOptions,\n            column.showOverflowTooltip\n          )\n        return h(\n          TdWrapper,\n          {\n            style: getCellStyle($index, cellIndex, row, column),\n            class: getCellClass($index, cellIndex, row, column, colspan - 1),\n            key: `${patchKey}${baseKey}`,\n            rowspan,\n            colspan,\n            onMouseenter: ($event: MouseEvent) =>\n              handleCellMouseEnter(\n                $event,\n                row,\n                mergedTooltipOptions as TableOverflowTooltipOptions\n              ),\n            onMouseleave: handleCellMouseLeave,\n          },\n          {\n            default: () => cellChildren(cellIndex, column, data),\n          }\n        )\n      })\n    )\n  }\n  const cellChildren = <T extends DefaultRow>(\n    _cellIndex: number,\n    column: TableColumnCtx<T>,\n    data: RenderRowData<T>\n  ) => {\n    return column.renderCell(data)\n  }\n\n  const wrappedRowRender = (row: T, $index: number) => {\n    const store = props.store!\n    const { isRowExpanded, assertRowKey } = store\n    const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } =\n      store.states\n    const columns = store.states.columns.value\n    const hasExpandColumn = columns.some(({ type }) => type === 'expand')\n    if (hasExpandColumn) {\n      const expanded = isRowExpanded(row)\n      const tr = rowRender(row, $index, undefined, expanded)\n      const renderExpanded = parent?.renderExpanded\n      if (!renderExpanded) {\n        console.error('[Element Error]renderExpanded is required.')\n        return tr\n      }\n\n      // 在没设置时候避免 h 执行\n      // 非保留模式且未展开时，直接返回\n      // 使用二维数组包装，避免修改 $index\n      const rows = [[tr]]\n\n      // 仅在需要时创建展开行（保留模式或展开状态）\n      if (parent.props.preserveExpandedContent || expanded) {\n        rows[0].push(\n          h(\n            'tr',\n            {\n              key: `expanded-row__${tr.key as string}`,\n              style: { display: expanded ? '' : 'none' },\n            },\n            [\n              h(\n                'td',\n                {\n                  colspan: columns.length,\n                  class: `${ns.e('cell')} ${ns.e('expanded-cell')}`,\n                },\n                [renderExpanded({ row, $index, store, expanded })]\n              ),\n            ]\n          )\n        )\n      }\n\n      return rows\n    } else if (Object.keys(treeData.value).length) {\n      assertRowKey()\n      // TreeTable 时，rowKey 必须由用户设定，不使用 getKeyOfRow 计算\n      // 在调用 rowRender 函数时，仍然会计算 rowKey，不太好的操作\n      const key = getRowIdentity(row, rowKey.value)\n      let cur = treeData.value[key]\n      let treeRowData = null\n      if (cur) {\n        treeRowData = {\n          expanded: cur.expanded,\n          level: cur.level,\n          display: true,\n          noLazyChildren: undefined as boolean | undefined,\n          loading: undefined as boolean | undefined,\n        }\n        if (isBoolean(cur.lazy)) {\n          if (treeRowData && isBoolean(cur.loaded) && cur.loaded) {\n            treeRowData.noLazyChildren = !(cur.children && cur.children.length)\n          }\n          treeRowData.loading = cur.loading\n        }\n      }\n      const tmp = [rowRender(row, $index, treeRowData ?? undefined)]\n      // 渲染嵌套数据\n      if (cur) {\n        // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index\n        let i = 0\n        const traverse = (children: T[], parent: TreeData) => {\n          if (!(children && children.length && parent)) return\n          children.forEach((node) => {\n            // 父节点的 display 状态影响子节点的显示状态\n            const innerTreeRowData: Partial<Record<string, any>> = {\n              display: parent.display && parent.expanded,\n              level: parent.level! + 1,\n              expanded: false,\n              noLazyChildren: false,\n              loading: false,\n            }\n            const childKey = getRowIdentity(node, rowKey.value)\n            if (isPropAbsent(childKey)) {\n              throw new Error('For nested data item, row-key is required.')\n            }\n            cur = { ...treeData.value[childKey] }\n            // 对于当前节点，分成有无子节点两种情况。\n            // 如果包含子节点的，设置 expanded 属性。\n            // 对于它子节点的 display 属性由它本身的 expanded 与 display 共同决定。\n            if (cur) {\n              innerTreeRowData.expanded = cur.expanded\n              // 懒加载的某些节点，level 未知\n              cur.level = cur.level || innerTreeRowData.level\n              cur.display = !!(cur.expanded && innerTreeRowData.display)\n              if (isBoolean(cur.lazy)) {\n                if (isBoolean(cur.loaded) && cur.loaded) {\n                  innerTreeRowData.noLazyChildren = !(\n                    cur.children && cur.children.length\n                  )\n                }\n                innerTreeRowData.loading = cur.loading\n              }\n            }\n            i++\n            tmp.push(rowRender(node, $index + i, innerTreeRowData))\n            if (cur) {\n              const nodes =\n                lazyTreeNodeMap.value[childKey] ||\n                node[childrenColumnName.value]\n              traverse(nodes, cur)\n            }\n          })\n        }\n        // 对于 root 节点，display 一定为 true\n        cur.display = true\n        const nodes =\n          lazyTreeNodeMap.value[key] || row[childrenColumnName.value]\n        traverse(nodes, cur)\n      }\n      return tmp\n    } else {\n      return rowRender(row, $index, undefined)\n    }\n  }\n\n  return {\n    wrappedRowRender,\n    tooltipContent,\n    tooltipTrigger,\n  }\n}\n\nexport default useRender\n"],"mappings":"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"}