基于 el-tooltip 的二次封装

（1）html 部分

<template>
  <el-tooltip
    :disabled="!errorMessage"
    :content="errorMessage"
    placement="top"
    effect="light"
    :visible="tooltipVisible"
    popper-class="editable-table-error-popper"
  >
    <div class="cell-error-wrap" :class="{ 'is-error': !!errorMessage }">
      <slot />
    </div>
  </el-tooltip>
</template>

<style scoped lang="scss">
.cell-error-wrap {
  width: 100%;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.2s;
  box-sizing: border-box;

  &.is-error {
    border-color: var(--el-color-danger);
    background-color: rgba(245, 108, 108, 0.06);
    padding: 1px;
  }
}
</style>

（2）js部分

import { computed } from "vue";

defineOptions({
  name: "CellErrorWrap",
});

const props = withDefaults(
  defineProps<{
    errorMessage?: string;
    forceShow?: boolean;
  }>(),
  {
    errorMessage: "",
    forceShow: false,
  }
);

const tooltipVisible = computed(() => {
  if (!props.errorMessage) return false;
  if (props.forceShow) return true;
  return undefined;
});