antdesign 表格超出隐藏

封装组件 tableTip.vue

<template>
  <a-tooltip placement="top">
    <template v-if="!hiddenTip" slot="title">
      <span>{{content}}</span>
    </template>
    <div
      ref="content"
      :style="{ whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden'}"
    >{{content}}</div>
  </a-tooltip>
</template>
<script>
export default {
  data() {
    return {
      fileList: this.attachList,
      hiddenTip: true
    };
  },
  // 父组件
  props: {
    content: { type: String, default: "" }
  },
  mounted() {
    if (this.$refs.content.scrollWidth > this.$refs.content.clientWidth) {
      this.hiddenTip = false;
    } else {
      this.hiddenTip = true;
    }
  },
  methods: {}
};
</script>
<style  scoped>
</style>

使用组件: table.vue

<template>
  <a-tooltip placement="top">
    <template v-if="!hiddenTip" slot="title">
      <span>{{content}}</span>
    </template>
    <div
      ref="content"
      :style="{ whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden'}"
    >{{content}}</div>
  </a-tooltip>
</template>
<script>
export default {
  data() {
    return {
      fileList: this.attachList,
      hiddenTip: true
    };
  },
  // 父组件
  props: {
    content: { type: String, default: "" }
  },
  mounted() {
    if (this.$refs.content.scrollWidth > this.$refs.content.clientWidth) {
      this.hiddenTip = false;
    } else {
      this.hiddenTip = true;
    }
  },
  methods: {}
};
</script>
<style  scoped>
</style>