vue项目，iview--Table支持文本溢出省略号组件封装

最新推荐文章于 2023-08-14 11:13:59 发布

灰小小小熊

最新推荐文章于 2023-08-14 11:13:59 发布

阅读量935

点赞数

分类专栏： JS vue 文章标签： vue javascript 数据结构

本文链接：https://blog.csdn.net/weixin_44883642/article/details/121373598

版权

本文介绍了如何在Vue项目中，结合IView库，实现Table组件内文本溢出时显示省略号的效果，提供了一种组件封装的方法。

摘要由CSDN通过智能技术生成

组件部分

<template>
  <Tooltip
    max-width="200"
    transfer
    :content="content"
    :disabled="!showTooltip"
    :class="tooltipClass"
  >
    <span
      ref="content"
      @mouseenter="handleTooltipIn"
      :class="textClass"
      :style="textStyle"
      >{
  { content }}</span
    >
  </Tooltip>
</template>

<script>
export default {
  props: {
    content: String,
    withIcon: {
      type: Boolean,
      default: false,
    },
    textStyle: {
      type: String,
      default: ''
    },
    clickable: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      showTooltip: false, // 鼠标滑过overflow文本时，再检查是否需要显示
    }
  },

  computed: {
    tooltipClass() {
      return [
        'ivu-table-cell-tooltip',
        {'withIcon-ivu-tabl