iview--table表格title提示和气泡提示_vxe-table给单元格添加提示-CSDN博客

本文链接：https://blog.csdn.net/qq_32678401/article/details/97802414

本文介绍了iView的Table组件中如何实现标题提示和气泡提示功能，探讨了气泡提示在内容未超过一行时仍然显示的问题，并对比了与Element-UI table组件的差异。期待找到优化解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简述：

文本不换行，超出显示省略号，两种提示方式，title提示和气泡提示

气泡提示不足：当内容没超过一行，也会出现气泡提示。觉得不如Element-UI的table组件好用。

若有简单有效的解决方案，还请告知哦^_^

<Table border :columns="tableColumn" :data="tableData"></Table>

mounted() {
    this.initTableColumn('tableColumn')
},
methods: {
  initTableColumn(columnName) {
    //  提示一：title提示
    for (let i = 0; i < this[columnName].length; i++) {
      if (!this[columnName][i].render) {
        this.$set(this[columnName][i], 'ellipsis', true)
        this.$set(this[columnName][i], 'render', (h, params) => {
          return h('span', {attrs: {title: params.row[params.column.key]}}, params.row[params.column.key])
        })
      }
    }
    
    //  title提示
    for (let i = 0; i < this[columnName].length; i++) {
      if (!this[columnName][i].render) {
        this.$set(this[columnName][i], 'render', (h, params) => {
          return h('div', [
            h('span', {
              style: {
                display: 'inline-block',
                width: '100%',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap'
              },
              domProps: {
                title: params.row[params.column.key]
              }
            }, params.row[params.column.key])
          ])
        })
      }
    }

    // 提示二：气泡提示
    for (let i = 0; i < this[columnName].length; i++) {
      if (!this[columnName][i].render) {
        this.$set(this[columnName][i], 'ellipsis', true)
        this.$set(this[columnName][i], 'render', (h, params) => {
          return h('Tooltip', {
            props: { placement: 'top' }
          }, [
            params.row[params.column.key],
            h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, params.row[params.column.key])
          ])
        })
      }
    }

  }
}