chore: [table] optimization type check (#19280)

* chore: [table] optimization type check

* feat: null

* chore: isNil

* fix: import

packages/components/table/src/filter-panel.vue

@@ -50,8 +50,7 @@
           :class="[
             ns.e('list-item'),
             {
-              [ns.is('active')]:
-                filterValue === undefined || filterValue === null,
+              [ns.is('active')]: isPropAbsent(filterValue),
             },
           ]"
           @click="handleSelect(null)"
@@ -99,8 +98,9 @@ import { ClickOutside } from '@element-plus/directives'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import ElTooltip from '@element-plus/components/tooltip'
 import ElScrollbar from '@element-plus/components/scrollbar'
-import type { Placement } from '@element-plus/components/popper'
+import { isPropAbsent } from '@element-plus/utils'
 
+import type { Placement } from '@element-plus/components/popper'
 import type { PropType, WritableComputedRef } from 'vue'
 import type { TableColumnCtx } from './table-column/defaults'
 import type { TableHeader } from './table-header'
@@ -161,7 +161,7 @@ export default defineComponent({
       get: () => (props.column?.filteredValue || [])[0],
       set: (value: string) => {
         if (filteredValue.value) {
-          if (typeof value !== 'undefined' && value !== null) {
+          if (!isPropAbsent(value)) {
             filteredValue.value.splice(0, 1, value)
           } else {
             filteredValue.value.splice(0, 1)
@@ -212,7 +212,7 @@ export default defineComponent({
     }
     const handleSelect = (_filterValue?: string) => {
       filterValue.value = _filterValue
-      if (typeof _filterValue !== 'undefined' && _filterValue !== null) {
+      if (!isPropAbsent(_filterValue)) {
         confirmFilter(filteredValue.value)
       } else {
         confirmFilter([])
@@ -253,6 +253,7 @@ export default defineComponent({
       handleConfirm,
       handleReset,
       handleSelect,
+      isPropAbsent,
       isActive,
       t,
       ns,

packages/components/table/src/h-helper.ts

@@ -1,10 +1,12 @@
 // @ts-nocheck
 import { h } from 'vue'
+import { isUndefined } from '@element-plus/utils'
+
 export function hColgroup(props) {
   const isAuto = props.tableLayout === 'auto'
   let columns = props.columns || []
   if (isAuto) {
-    if (columns.every((column) => column.width === undefined)) {
+    if (columns.every(({ width }) => isUndefined(width))) {
       columns = []
     }
   }

packages/components/table/src/store/current.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import { getCurrentInstance, ref, unref } from 'vue'
+import { isNull } from 'lodash-unified'
 import { getRowIdentity } from '../util'
 
 import type { Ref } from 'vue'
@@ -59,7 +60,7 @@ function useCurrent<T>(watcherData: WatcherPropsData<T>) {
       } else {
         currentRow.value = null
       }
-      if (currentRow.value === null) {
+      if (isNull(currentRow.value)) {
         instance.emit('current-change', null, oldCurrentRow)
       }
     } else if (_currentRowKey.value) {

packages/components/table/src/store/helper.ts

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import { watch } from 'vue'
 import { debounce } from 'lodash-unified'
+import { isObject } from '@element-plus/utils'
 import useStore from '.'
 
 import type { Store } from '.'
@@ -57,7 +58,7 @@ function proxyTableProps<T>(store: Store<T>, props: TableProps<T>) {
 function handleValue<T>(value, propsKey: string, store: Store<T>) {
   let newVal = value
   let storeKey = InitialStateMap[propsKey]
-  if (typeof InitialStateMap[propsKey] === 'object') {
+  if (isObject(InitialStateMap[propsKey])) {
     storeKey = storeKey.key
     newVal = newVal || InitialStateMap[propsKey].default
   }

packages/components/table/src/store/index.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import { getCurrentInstance, nextTick, unref } from 'vue'
+import { isNull } from 'lodash-unified'
 import { useNamespace } from '@element-plus/hooks'
 import useWatcher from './watcher'
 
@@ -169,7 +170,7 @@ function useStore<T>() {
       const columnValue = unref(sortingColumn),
         propValue = unref(sortProp),
         orderValue = unref(sortOrder)
-      if (orderValue === null) {
+      if (isNull(orderValue)) {
         states.sortingColumn.value = null
         states.sortProp.value = null
       }

packages/components/table/src/table-body/render-helper.ts

@@ -2,7 +2,7 @@
 import { computed, h, inject } from 'vue'
 import { merge } from 'lodash-unified'
 import { useNamespace } from '@element-plus/hooks'
-import { isBoolean } from '@element-plus/utils'
+import { isBoolean, isPropAbsent } from '@element-plus/utils'
 import { getRowIdentity } from '../util'
 import { TABLE_INJECTION_KEY } from '../tokens'
 import useEvents from './events-helper'
@@ -227,7 +227,7 @@ function useRender<T>(props: Partial<TableBodyProps<T>>) {
               loading: false,
             }
             const childKey = getRowIdentity(node, rowKey.value)
-            if (childKey === undefined || childKey === null) {
+            if (isPropAbsent(childKey)) {
               throw new Error('For nested data item, row-key is required.')
             }
             cur = { ...treeData.value[childKey] }

packages/components/table/src/table-body/styles-helper.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { inject } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
-import { isArray, isFunction, isString } from '@element-plus/utils'
+import { isArray, isFunction, isObject, isString } from '@element-plus/utils'
 import {
   ensurePosition,
   getFixedColumnOffset,
@@ -129,7 +129,7 @@ function useStyles<T>(props: Partial<TableBodyProps<T>>) {
       if (isArray(result)) {
         rowspan = result[0]
         colspan = result[1]
-      } else if (typeof result === 'object') {
+      } else if (isObject(result)) {
         rowspan = result.rowspan
         colspan = result.colspan
       }

packages/components/table/src/table-column/render-helper.ts

@@ -9,7 +9,7 @@ import {
   unref,
   watchEffect,
 } from 'vue'
-import { debugWarn, isArray } from '@element-plus/utils'
+import { debugWarn, isArray, isUndefined } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import {
   cellForced,
@@ -73,7 +73,7 @@ function useRender<T>(
       column.minWidth = 80
     }
     column.realWidth = Number(
-      column.width === undefined ? column.minWidth : column.width
+      isUndefined(column.width) ? column.minWidth : column.width
     )
     return column
   }
@@ -83,7 +83,7 @@ function useRender<T>(
     const source = cellForced[type] || {}
     Object.keys(source).forEach((prop) => {
       const value = source[prop]
-      if (prop !== 'className' && value !== undefined) {
+      if (prop !== 'className' && !isUndefined(value)) {
         column[prop] = value
       }
     })

packages/components/table/src/table-header/event-helper.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import { getCurrentInstance, inject, ref } from 'vue'
+import { isNull } from 'lodash-unified'
 import {
   addClass,
   hasClass,
@@ -189,7 +190,7 @@ function useEvent<T>(props: TableHeaderProps<T>, emit) {
 
     if (
       sortingColumn !== column ||
-      (sortingColumn === column && sortingColumn.order === null)
+      (sortingColumn === column && isNull(sortingColumn.order))
     ) {
       if (sortingColumn) {
         sortingColumn.order = null

packages/components/table/src/table-layout.ts

@@ -1,9 +1,10 @@
 // @ts-nocheck
 import { isRef, nextTick, ref } from 'vue'
+import { isNull } from 'lodash-unified'
 import { hasOwn, isClient, isNumber, isString } from '@element-plus/utils'
 import { parseHeight } from './util'
-import type { Ref } from 'vue'
 
+import type { Ref } from 'vue'
 import type { TableColumnCtx } from './table-column/defaults'
 import type { TableHeader } from './table-header'
 import type { Table } from './table/defaults'
@@ -64,7 +65,7 @@ class TableLayout<T> {
      * When the height is not initialized, it is null.
      * After the table is initialized, when the height is not configured, the height is 0.
      */
-    if (height === null) return false
+    if (isNull(height)) return false
     const scrollBarRef = this.table.refs.scrollBarRef
     if (this.table.vnode.el && scrollBarRef?.wrapRef) {
       let scrollY = true

packages/components/table/src/util.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { createVNode, render } from 'vue'
-import { flatMap, get, merge } from 'lodash-unified'
+import { flatMap, get, isNull, merge } from 'lodash-unified'
 import {
   hasOwn,
   isArray,
@@ -9,6 +9,7 @@ import {
   isNumber,
   isObject,
   isString,
+  isUndefined,
   throwError,
 } from '@element-plus/utils'
 import ElTooltip, {
@@ -206,7 +207,7 @@ export function mergeOptions<T, K>(defaults: T, config: K): T & K {
   for (key in config) {
     if (hasOwn(config as unknown as Record<string, any>, key)) {
       const value = config[key]
-      if (typeof value !== 'undefined') {
+      if (!isUndefined(value)) {
         options[key] = value
       }
     }
@@ -216,7 +217,7 @@ export function mergeOptions<T, K>(defaults: T, config: K): T & K {
 
 export function parseWidth(width: number | string): number | string {
   if (width === '') return width
-  if (width !== undefined) {
+  if (!isUndefined(width)) {
     width = Number.parseInt(width as string, 10)
     if (Number.isNaN(width)) {
       width = ''
@@ -227,7 +228,7 @@ export function parseWidth(width: number | string): number | string {
 
 export function parseMinWidth(minWidth: number | string): number | string {
   if (minWidth === '') return minWidth
-  if (minWidth !== undefined) {
+  if (!isUndefined(minWidth)) {
     minWidth = parseWidth(minWidth)
     if (Number.isNaN(minWidth)) {
       minWidth = 80
@@ -525,7 +526,7 @@ export const getFixedColumnsClass = <T>(
 function getOffset<T>(offset: number, column: TableColumnCtx<T>) {
   return (
     offset +
-    (column.realWidth === null || Number.isNaN(column.realWidth)
+    (isNull(column.realWidth) || Number.isNaN(column.realWidth)
       ? Number(column.width)
       : column.realWidth)
   )