fix(table): fix the bug of invalid tooltipEffect prop (#1470)

packages/table/src/table-body/events-helper.ts

@@ -88,7 +88,7 @@ function useEvents(props: TableBodyProps) {
       createTablePopper(cell, cell.innerText || cell.textContent, {
         placement: 'top',
         strategy: 'fixed',
-      })
+      }, row.tooltipEffect)
     }
   }
   const handleCellMouseLeave = event => {

packages/table/src/table-body/index.ts

@@ -15,6 +15,7 @@ export default defineComponent({
       type: Object as PropType<Store>,
     },
     stripe: Boolean,
+    tooltipEffect: String,
     context: {
       default: () => ({}),
       type: Object,

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

@@ -43,7 +43,8 @@ function useRender(props: TableBodyProps) {
     return index
   }
   const rowRender = (row, $index, treeRowData) => {
-    const { indent, columns } = props.store.states
+    const { tooltipEffect, store } = props
+    const { indent, columns } = store.states
     const rowClasses = getRowClass(row, $index)
     let display = true
     if (treeRowData) {
@@ -108,7 +109,7 @@ function useRender(props: TableBodyProps) {
             class: getCellClass($index, cellIndex, row, column),
             rowspan,
             colspan,
-            onMouseenter: $event => handleCellMouseEnter($event, row),
+            onMouseenter: $event => handleCellMouseEnter($event, { ...row, tooltipEffect }),
             onMouseleave: handleCellMouseLeave,
           },
           [column.renderCell(data)],

packages/table/src/table-body/table-body.d.ts

@@ -8,6 +8,7 @@ interface TableBodyProps {
   rowStyle: AnyObject | fn
   fixed: string
   highlight: boolean
+  tooltipEffect: string
 }
 
 export {

packages/table/src/table.vue

@@ -45,6 +45,7 @@
         :context="context"
         :highlight="highlightCurrentRow"
         :row-class-name="rowClassName"
+        :tooltip-effect="tooltipEffect"
         :row-style="rowStyle"
         :store="store"
         :stripe="stripe"
@@ -129,6 +130,7 @@
         <table-body
           :highlight="highlightCurrentRow"
           :row-class-name="rowClassName"
+          :tooltip-effect="tooltipEffect"
           :row-style="rowStyle"
           :store="store"
           :stripe="stripe"
@@ -202,6 +204,7 @@
         <table-body
           :highlight="highlightCurrentRow"
           :row-class-name="rowClassName"
+          :tooltip-effect="tooltipEffect"
           :row-style="rowStyle"
           :store="store"
           :stripe="stripe"

packages/table/src/util.ts

@@ -304,10 +304,12 @@ export function createTablePopper(
   trigger: HTMLElement,
   popperContent: string,
   popperOptions: Partial<IPopperOptions>,
+  tooltipEffect: string,
 ) {
   function renderContent(): HTMLDivElement {
+    const isLight = tooltipEffect === 'light'
     const content = document.createElement('div')
-    content.className = 'el-tooltip__popper is-dark'
+    content.className = `el-popper ${isLight ? 'is-light' : 'is-dark'}`
     content.innerHTML = popperContent
     content.style.zIndex = String(PopupManager.nextZIndex())
     document.body.appendChild(content)