antdVue表格Ellipsis溢出高亮

ant desigin vue的表格有一个属性Ellipsis是可以支持溢出自动省略，然后鼠标移到字体上可以显示省略的内容。不过由于该属性暴露的可修改内容太少，即该表格是什么内容，显示的就是什么内容，这样如果表格内的内容是有html的标签，显示省略的内容也会有html标签。而不会进行html渲染。
本问的效果图

vue插件内容

<template>
  <a-tooltip :overlayClassName='overlayClassName' trigger='hover'>
    <template slot='title'>
      <span v-html="keyword"></span>
    </template>
    <span class='eg-ellipsis-span ellipsisTips' v-show-tips='isLipsis' v-html='text'></span>
  </a-tooltip>
</template>
<script>

export default {
  name: 'EgEllipsisSpan',
  data () {
    return {
      lipsis: false
    }
  },
  props: {
    text: {
      type: [String, Number]
    },
    tooltip: {
      default: true
    },
    keyword: String
  },
  computed: {
    overlayClassName() {
      if (this.tooltip && this.lipsis) {
        return 'showTool'
      } else return 'hideTool'
    },
    result () {
      // return  this.keyword
    /*  let val = this.text || this.text == 0 ? this.text : ''
      if (this.isNumber(val)) return val
      if (val.indexOf(keyword) !== -1) {
        // 关键字高亮处理
        return val.replace(keyword, `<font color='#3F8FFF'>aaaaa</font>`)
      } else {
        return val
      }
      */
    }
  },
  methods: {
    isNumber(n) {
      return !isNaN(parseFloat(n)) && isFinite(n)
    },
    isLipsis(flag) {
      // true 溢出
      this.lipsis = true
      // this.$emit('getLipsis', flag)
    }
  }
}
</script>
<style lang='less'>
/*.hideTool {
  display: none !important;
}*/

.ellipsisTips {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eg-ellipsis-span {
  display: inline-block;
  width: 100%;
  cursor: default;
}
</style>

插件的使用

这里text是页面没有动作时显示的文本，keyword是鼠标移动到字体上时显示缩略的文本。
最重要的一个注册方法，记得要在根节点里注册。

Vue.directive('showTips', {
  bind (el, binding) {
    window.setTimeout(function () {
      const curStyle = window.getComputedStyle(el, '') // 获取当前元素的style
      const textSpan = document.createElement('span') // 创建一个容器来记录文字的width
      // 设置新容器的字体样式，确保与当前需要隐藏的样式相同
      textSpan.style.fontSize = curStyle.fontSize
      textSpan.style.fontWeight = curStyle.fontWeight
      textSpan.style.fontFamily = curStyle.fontFamily
      textSpan.style.padding = curStyle.padding
      // 将容器插入body，如果不插入，offsetWidth为0
      document.body.appendChild(textSpan)
      // 设置新容器的文字
      textSpan.innerHTML = el.innerText
      // 如果字体元素大于当前元素，则需要隐藏
      if (textSpan.offsetWidth > el.offsetWidth) {
        binding.value(true)
      } else binding.value(false)

      // 记得移除刚刚创建的记录文字的容器
      document.body.removeChild(textSpan)
    }, 100)
  }
})

我这里是因为这个record.description里面的值就是一个有标签的文本，这样直接传到组件里进行html渲染展示。如果说要做替换，可以选择将组件里注释的部分放开，同时keyword改为result，这样可以进行关键字的替换高亮展示。
最后文章来源
https://blog.csdn.net/weixin_38500689/article/details/109031276
个人觉得原文写的比较难懂，重新翻译了下。