【Vue3+naive】封装自定义表格内容

1、新建工具方法 render.ts

import { h } from 'vue'
import { alpha } from '@/utils/common'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { NPopconfirm } from 'naive-ui'
const useDesignStoreState = useDesignStore()
interface optionType {
  func: (row: any) => void
  onClick?: boolean
  arguments?: any
  textColor?: any
  joinParams?: string
  iconFontStyle?: {
    icon: string
    size?: number
    color?: string
  }
}
/**
 *
 * @param row  当前行数据
 * @param field  当前字段
 * @param func  当前方法
 * @param tooltip  是否需要 tooltip
 * @param special  是否需要 特殊显示 需要新增一条属性值为 ***Desc:row[field]Desc 的字段
 * @param textColor  字体显示颜色
 * @returns 返回 tooltipRender
 * @option 配置对象
 */
const tooltipRender = (
  row: any,
  field: string,
  option: optionType = { func: function () {}, onClick: true },
  tooltip: boolean = true,
  special: boolean = false,
  textColor: any = alpha(<string>useDesignStoreState.getAppTheme)
) => {
  option = {
    onClick: true,
    ...option
  }
  return tooltip
    ? h(
        NPopconfirm,
        {
          trigger: 'hover',
          showIcon: false,
          positiveText: null,
          negativeText: null,
          arrowStyle: {
            background: 'rgba(51, 54, 57, 0.1)'
          },
          style: {
            background: 'rgba(51, 54, 57, 0.9)',
            color: 'white',
            maxWidth: '200px'
          }
        },
        {
          trigger: () => {
            return h(
              'span',
              {
                style: {
                  color: textColor,
                  cursor: 'pointer',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  with: '100%',
                  display: 'block'
                  // justifyContent: 'center'
                },
                onClick: () => option.onClick && option.func(row)
              },
              { default: () => row[field] }
            )
          },
          default: () => {
            return h('div', {}, special ? row[`${field}Desc`] : row[field])
          }
        }
      )
    : h(
        'span',
        {
          style: {
            color: textColor,
            cursor: 'pointer'
          },
          onClick: () => option.onClick && option.func(row)
        },
        { default: () => row[field] }
      )
}

2、使用

 // 引用 
 import { tooltipRender } from '@/utils/render'
   {
      align: 'center',
      title: '',
      width: 70,
      key: 'projectName',
      render(row: any, index: any) {
        return tooltipRender(row, 'projectName', { func: goDetails })
      }
    },