iview table 单行显示文字 默认key 文字超出宽度 显示... 加tip cut-text2.vue

cut-text2.vue

<template>
  <Tooltip2 :max-width="tipMaxWidth" :placement="tipPlacement" :disabled="!isOverflow" transfer
    :style="{ width: this.allWidth ? '100%' : null, verticalAlign: verticalAlign ? 'middle' : null, textAlign: toolTipTextAlign }">
    <div ref="textRef" class="text-ellipsis-container" :style="ellipsisStyle" @mouseenter="checkOverflow">
      {{ content }}
    </div>
    <span slot="content">
      <div :style="`max-height:${tipMaxHeight}px;overflow-y:auto;padding:3px;`">{{ content }}</div>
    </span>
  </Tooltip2>
</template>
<script>
import Tooltip2 from '../tooltip'
export default {
  components: { Tooltip2 },
  props: {
    // 文字内容
    content: {
      type: String,
      default: ''
    },
    lines: {
      type: Number,
      default: 1 // 就默认一行 一行最稳定
    },
    // 文字对齐方式
    toolTipTextAlign: {
      type: String,
      default: 'left'
    },
    textAlign: {
      type: String,
      default: 'center'
    },
    tipPlacement: {
      type: String,
      default: 'top'
    },
    tipMaxWidth: {
      type: Number,
      default: 300
    },
    tipMaxHeight: {
      type: Number,
      default: 100
    },
    allWidth: {
      type: Boolean,
      default: true
    },
    verticalAlign: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ellipsisStyle () {
      // 显式声明 height 为 auto，确保在文字少时完全由内容撑开（1行文字就是1行高度）
      const baseStyle = {
        height: 'auto',
        maxHeight: 'none',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        boxSizing: 'border-box',
        textAlign: this.textAlign
      }

      if (this.lines === 1) {
        return {
          ...baseStyle,
          whiteSpace: 'nowrap'
        }
      } else {
        return {
          ...baseStyle,
          display: '-webkit-box',
          WebkitLineClamp: this.lines,
          // 额外加上标准属性，兼容部分早期标准或多核浏览器
          lineClamp: this.lines,
          WebkitBoxOrient: 'vertical',
          // 用 break-word 替代 break-all，对老版本浏览器的长英文、标点换行更友好
          wordBreak: 'break-word'
        }
      }
    },
    cutedContent () {
      if (this.content && this.content.length > this.maxCount) {
        return this.content.substring(0, this.maxCount) + '...'
      } else {
        return this.content
      }
    }
  },
  data () {
    return {
      isOverflow: false
    }
  },
  methods: {
    checkOverflow () {
      const el = this.$refs.textRef
      if (!el) return

      if (this.lines === 1) {
        // 单行比较：实际内容宽度 > 容器可视宽度
        this.isOverflow = el.scrollWidth > el.clientWidth
      } else {
        // 多行比较：实际内容高度 > 容器可视高度
        // Firefox 52 支持 scrollHeight 和 clientHeight 的精准判定
        this.isOverflow = el.scrollHeight > el.clientHeight
      }
    }
  },
  created () {
  },
  mounted () { },

  watch: {}
}
</script>

<style lang="less" scoped>
.text-ellipsis-container {
  width: 100%;
  /* 确保块级上下文中，老版本 Firefox 的盒模型表现正常 */
  display: block;
}
</style>

<template>
  <Tooltip v-bind="$attrs"
           v-on="$listeners"
           theme="light"
           transfer
           transferClassName="tooltip2">
    <template v-for="slotName in slotArr"
              :slot="slotName">
      <slot :name="slotName"></slot>
    </template>
  </Tooltip>
</template>
<script>
export default {
  inheritAttrs: false,
  components: {

  },
  props: {

  },
  data () {
    return {
    }
  },
  mounted () {
  },
  created () {

  },
  computed: {
    slotArr () {
      return [...Object.keys(this.$slots)]
    }
  }
}
</script>

configQueryListFunc.js

import CutText2 from '@/components/abc-lib/cut-text2'
export const mergeColumns = (columns) => {
  return columns.map(item => {
    if (item.key) {
      // 设置render
      if (!item.render) {
        // const maxCount = item.maxCount || 60
        item.render = (h, params) => {
          return h(CutText2, {
            props: {
              content: params.row[item.key],
              // lines: 1 就一行 一行最稳定
              // align 这里没有用columns的方式，就为了能表头居中，内容居左
              textAlign: item.textAlign || 'center'
              // maxCount: maxCount
            }
          }, {})
        }
      } else {
        return item
      }
    } else {
      return item
    }
  })
}

columns.js

export const columns = [{
  title: '姓名',
  key: 'name',
  minWidth: 100,
  align: 'center',
}]

使用方法

import { mergeColumns } from '...'
import { columns } from '...'

this.columns = mergeColumns(columns)