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

列在文件超长时,显示的提示异常 #7

Closed woodcoal closed 2 months ago

woodcoal commented 2 months ago

当 column 的 ellipsis 属性开启时,如果此列是自定义渲染的,则 title 值将出现错误,如:

image

column.ellipsis = { lineClamp: 2, showTitle: true }
column.renderBodyCell = (option) => h('div', option.row[option.column.key]);

此时 title 显示的不是提示文本,而是对象。建议 title 提示的时候直接取 td 中 innerText 即可。

woodcoal commented 2 months ago

因为允许自定义渲染,td 中的内容如果非文本,而是一个层包含其他内容,html 语法将不规范,如: image

td 中包括 span 显示内容,但是 span 内又是自定义内容,如上图。导致语法不规范,span 不能包裹 div 所以我建议取消 span,将 span 中的样式与属性移动到 td 上,如:

-   <td class="ve-table-body-td" rowspan="1" colspan="1" col-key="content" style="text-align: center">
+   <td class="ve-table-body-td ve-table-body-td-span-ellipsis" rowspan="1" colspan="1" col-key="content" style="text-align: center; -webkit-line-clamp: 2" title="修改为 innerText">
-       <span title="[object Object]" class="ve-table-body-td-span-ellipsis" style="-webkit-line-clamp: 2">
            <div>自定义内容</div>
-       </span>
    </td>