kohaiy / easytable

A powerful data table based on vuejs. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.
https://easytable.kohai.top/
19 stars 1 forks source link

超长文本提示还是存在问题 #10

Closed woodcoal closed 1 month ago

woodcoal commented 2 months ago
item.renderBodyCell = () => h('div', '测试内容');

输出后超长 title 提示还是显示为 [object Object]

我查了下 vNode 取文本貌似没有很好的解决方案。源码 body-td.txs 文件 350-356 部分:


      // ellipisis
      if (column.ellipsis) {
        const { showTitle } = column.ellipsis

        // default true
        const isShowTitle = isBoolean(showTitle) ? showTitle : true

        content = (
          <span
            title={isShowTitle ? getTextContentOfVNode(content) : ''}
            style={this.getEllipsisContentStyle()}
            class={clsName('body-td-span-ellipsis')}
          >
            {content}
          </span>
        )
      }

getTextContentOfVNode 这个函数取文本也不是很完美,是不是直接使用 rawCellValue 代替更好?顺便将 span 换成 div,如:

          <div
            title={isShowTitle ? rawCellValue  : ''}
            style={this.getEllipsisContentStyle()}
            class={clsName('body-td-span-ellipsis')}
          >
            {content}
          </div>

不过不论哪种方案都不能很好解决,因为 rawCellValue 本身也不一定是文本,也可能是对象。

要么就手动增加一个输出 title 函数

kohaiy commented 1 month ago

getTextContentOfVNode v0.0.5 没部署到, v0.0.6部署了 span 是开启 ellipsis 后套上去的,不知道有没有影响