表格内容溢出显示省略号浮空提示内容

表格列数据组件内容显示封装

<template>
  <el-tooltip
    :key="key"
    :disabled="tipShow"
    placement="top"
    effect="light"
    popper-class="popper-class"
  >
    <template #content>
      <span :class="newLine === 'true' && 'new-line'">{{ content }}</span>
    </template>
    <p ref="tipContent" v-resize:200="onResize" class="tips">
      <slot>{{ content }}</slot>
    </p>
  </el-tooltip>
</template>


<script>
  import { computed, defineComponent, ref, onMounted } from 'vue'


  export default defineComponent({
    name: 'tips',
    isComponents: true,
    props: {
      content: {
        type: null,
        required: true,
        default: ''
      },
      attributes: {
        type: Object,
        default: () => {}
      },
      newLine: {
        type: String,
        default: ''
      },
      key: {
        type: null,
        default: Date.now() + '-' + Math.floor(Math.random() * 10000)
      }
    },
    setup(props) {
      const tipContent = ref(null)
      const tipShow = ref(true)
      const getBoolean = () => {
        if (
          props.content &&
          tipContent.value &&
          tipContent.value.scrollWidth > tipContent.value.clientWidth
        ) {
          return false
        }
        if (props.attributes && props.attributes.hasOwnProperty('disabled'))         
  {
          return props.attributes.disabled
        }
        return true
      }
      onMounted(() => {
        tipShow.value = getBoolean()
      })
      const onResize = () => {
        tipShow.value = getBoolean()
      }
      return { tipContent, tipShow, onResize }
    }
  })
</script>


<style lang="scss" scoped>
  .tips {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .line {
    white-space: pre;
  }
</style>
<style lang="scss">
  .popper-class {
    max-width: 900px;
  }
</style>

<template>
  <el-tooltip
    :key="key"
    :disabled="tipShow"
    placement="top"
    effect="light"
    popper-class="popper-class"
  >
    <template #content>
      <span :class="newLine === 'true' && 'new-line'">{{ content }}</span>
    </template>
    <p ref="tipContent" v-resize:200="onResize" class="tips">
      <slot>{{ content }}</slot>
    </p>
  </el-tooltip>
</template>


<script>
  import { computed, defineComponent, ref, onMounted } from 'vue'


  export default defineComponent({
    name: 'tips',
    isComponents: true,
    props: {
      content: {
        type: null,
        required: true,
        default: ''
      },
      attributes: {
        type: Object,
        default: () => {}
      },
      newLine: {
        type: String,
        default: ''
      },
      key: {
        type: null,
        default: Date.now() + '-' + Math.floor(Math.random() * 10000)
      }
    },
    setup(props) {
      const tipContent = ref(null)
      const tipShow = ref(true)
      const getBoolean = () => {
        if (
          props.content &&
          tipContent.value &&
          tipContent.value.scrollWidth > tipContent.value.clientWidth
        ) {
          return false
        }
        if (props.attributes && props.attributes.hasOwnProperty('disabled'))         
       {
          return props.attributes.disabled
        }
        return true
      }
      onMounted(() => {
        tipShow.value = getBoolean()
      })
      const onResize = () => {
        tipShow.value = getBoolean()
      }
      return { tipContent, tipShow, onResize }
    }
  })
</script>


<style lang="scss" scoped>
  .tips {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .line {
    white-space: pre;
  }
</style>
<style lang="scss">
  .popper-class {
    max-width: 900px;
  }
</style>