js beyond the abbreviation display, copy function

 

<template>
  <div class="msgWrap" v-if="formatJson(scope.row, scope.row.text) !== '--'">
    <!-- 文字溢出，鼠标悬浮显示内容 -->
    <el-tooltip
      popper-class="popoverSelf"
      effect="dark"
      placement="top"
      v-if="!isShowTooltip"
    >
      <div slot="content">{
   
   { formatJson(scope.row, scope.row.text) }}</div>
      <div class="ellipsis" @mouseover="onMouseOver">
        {
   
   { formatJson(scope.row, scope.row.text) }}
      </div>
    </el-tooltip>
    <!-- 文字未溢出 -->
    <div class="ellipsis" @mouseover="onMouseOver" v-if="isShowTooltip">
      {
   
   { formatJson(scope.row, scope.row.text) }}
    </div>
    <el-link
      v-if="formatJson(scope.row, scope.row.text) !== '--'"
      type="primary"
      class="copyBtn"
      v-sdc
      v-clipboard:copy="formatJson(scope.row, scope.row.text)"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
    >
      复制
    </el-link>
  </div>
  <div v-else>--</div>
</template>

<script>
export default {
  props: {
    scope: {
      type: Object,
    },
  },
  data() {
    return {
      isShowTooltip: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    onMouseOver(e) {
      var target = e.target;
      let textLength = target.clientWidth;
      let containerLength = target.scrollWidth;
      if (textLength < containerLength) {
        // 溢出了
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    },
    onCopy() {
      event.stopPropagation();
      this.$message.success("复制成功");
    },
    onError() {
      this.$message.error("复制失败");
    },
  },
};
</script>

<style lang="less">
.msgWrap {
  padding-right: 25px;
  position: relative;
}

.popoverSelf {
  margin: 70px 0;
  max-width: 700px;
  padding: 10px;
  max-height: 800px;
  overflow-y: auto;
  word-break: break-all;
  white-space: pre-wrap;
  z-index: 9999;
}
.ellipsis {
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
.copyBtn {
  position: absolute;
  right: -18px;
  top: 0;
}
</style>

// 单元格数据转换(当前后端返回数据数据存在</br>，前端页面展示直接换行)
const formatJson = function (row, cellValue) {
  let newCellValue = cellValue || '';
  newCellValue = newCellValue.replace(/\r\n/g, '<br/>');
  if(!newCellValue) {
    try{
      let value = JSON.parse(JSON.stringify(JSON.parse(row.message)));
      newCellValue = (value.message).replace(/\r\n/g, '<br/>') || '--'
    }catch(error) {
      newCellValue = '--'
    }
  }
  return newCellValue
};

Newline related learning can refer to

https://www.jianshu.com/p/ec8af8f4e335

 Text automatic line break style word-break: break-all