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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"}