Tooltip 实现

<template>
  <a-tooltip
    v-if="isShowTooltip"
    placement="top"
    trigger="hover"
    overlayClassName="table-class"
    v-model:visible="isShow"
  >
    <template #title>
      <span>{{content}}</span>
    </template>
    <div class="content" @mouseleave="mouseleave">
      <span ref="contentRef">
        <slot></slot>
      </span>
    </div>
  </a-tooltip>
  <div v-else class="content" @mouseenter="mouseenter">
    <span ref="contentRef">
      <slot>{{contentText}}</slot>
    </span>
  </div>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue";

export default defineComponent({
  props: {
    content: {
      type: String,
      default: "",
    },
  },
  setup() {const isShow = ref(true);
    const contentRef = ref();
    const isShowTooltip = ref(false);
    const mouseleave = () => {// isShowTooltip.value = false};
    const mouseenter = () => {
    // 要害代码逻辑
      if (contentRef.value.parentNode.offsetWidth > contentRef.value.offsetWidth) {isShowTooltip.value = false;} else {isShowTooltip.value = true;}
    };
    return {
      isShow,
      contentRef,
      mouseenter,
      mouseleave,
      isShowTooltip,
    };
  },
});
</script>

<style>
.content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

Table 封装及 tooltip 应用

次要看 tooltip 的性能实现

<template>
  <a-table v-bind="$attrs" :rowKey="rowkeyIndex" :pagination="pagination">
    <template #bodyCell="{column, text, record}">
      <template v-if="column.slot">
        <!-- 如果配置了 ellipsis -->
        <ele-tooltip v-if="column.ellipsis" :content="text">
          <slot
            :name="column.dataIndex"
            :col="column"
            :rowItem="column"
            :text="text"
            :rowData="record"
          ></slot>
        </ele-tooltip>
        <slot
          v-else
          :name="column.dataIndex"
          :col="column"
          :rowItem="column"
          :text="text"
          :rowData="record"
        ></slot>
      </template>
      <!-- 默认没有 slot 且配置了 ellipsis -->
      <template v-else-if="column.ellipsis">
        <ele-tooltip :content="text">
          {{text}}
        </ele-tooltip>
      </template>
    </template>
    <template #headerCell v-if="slot.header">
      <slot name="header"></slot>
    </template>
  </a-table>
</template>

<script lang="ts">
import {defineComponent, computed} from "vue";
import eleTooltip from "@/components/tooltip/index.vue";
export default defineComponent({
  name: "commonTable",
  components: {eleTooltip,},
  props: {
    keyId: {
      type: String,
      default: "",
    },
    showQuickJumper: {
      type: Boolean,
      default: true,
    },
    showLessItems: {
      type: Boolean,
      default: false,
    },
    showSizeChanger: {
      type: Boolean,
      default: true,
    },
    total: {
      type: Number,
      default: 0,
    },
    paginationSize: {
      type: String,
      default: "",
    },
    defaultPageSize: {
      type: Number,
      default: 10,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    current: {
      type: Number,
      default: 1,
    },
  },
  setup(props, context) {
    const attrs: any = context.attrs;
    const slot = context.slots;
    const columnsCustom = computed(() => {
      return (
        attrs.columns &&
        attrs.columns
          .filter((item: any) => {return item.slot;})
          .map((item: any) => item.slot)
      );
    });
    // 从新定义表格分页
    const pagination = computed(() => {
      return {
        size: props.paginationSize,
        hideOnSinglePage: false,
        pageSize: props.pageSize,
        current: props.current,
        defaultPageSize: props.defaultPageSize,
        showQuickJumper: props.showQuickJumper,
        showLessItems: props.showLessItems,
        showSizeChanger: props.showSizeChanger,
        pageSizeOptions: ["10", "20", "50", "100"],
        total: props.total,
        showTotal: (total: number) => {return ` 共 ${total} 条 `;
        },
      };
    });
    const rowkeyIndex = (row: any) => {return row.id || row[props.keyId];
    };
    return {
      slot,
      rowkeyIndex,
      columnsCustom,
      pagination,
    };
  },
});
</script>