业务常用组件table-tips

使用场景：

element-table 表格列 自定义超出多少行 ... 显示 鼠标悬浮显示全部。

<template>
  <div class='table-tips'>
    <el-tooltip
        placement="top"
        v-model="showTooltip"
        :open-delay="500"
        effect="dark"
        :disabled="!showTooltip">
        <div slot="content">{{content}}</div>
        <div @mouseenter="showTips($event, content)" class='myNote'>{{content}}</div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'showTips',
  components: {},
  props: {
    content: [String, Number],
    default: ''
  },
  data() {
    return {
      showTooltip: false
    };
  },
  methods: {
    showTips(obj){
      const cellWidth = obj.target.offsetHeight
      const scrollHeight =  obj.target.scrollHeight
      scrollHeight <= cellWidth ? this.showTooltip = false : this.showTooltip = true
    },
  }
}
</script>
<style lang='less' scoped>
.myNote {
    display:-webkit-box;
    text-overflow:ellipsis;
    overflow:hidden;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
} 
</style>

使用示例：

import ShowTips from 'src/components/common/ShowTips.vue';

<ShowTips :content="formatData(scope.row, item)"/>