vue的table 一列的数据太多了怎么处理??用的iview

发布于 2022-09-11 20:52:24 字数 122 浏览 14 评论 0

clipboard.png
如图,我这个字段数据太多了。一般遇到这种问题怎么处理??

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

烈酒灼喉 2022-09-18 20:52:24

===================================正确答案=================================================
用的iview

{
            title: '完成条件',
            key: 'finishCondition',
            ellipsis: true,
            width: 150,
            render: (h, params) => {
              let texts = ''
              if (params.row.finishCondition !== null) {
                if (params.row.finishCondition.length > 25) {
                  texts = params.row.finishCondition.substring(0, 25) + '...'
                } else {
                  texts = params.row.finishCondition
                }
              }
              return h('Tooltip', {
                props: {
                  placement: 'top'
                }
              }, [
                texts,
                h('span', {
                  slot: 'content',
                  style: {
                    whiteSpace: 'normal',
                    wordBreak: 'break-all'
                  }
                }, params.row.finishCondition)
              ])
            }
          },
溺渁∝ 2022-09-18 20:52:24

table本身有自适应的 文字多的就会变的宽一些 你不要设置死宽度应该不会这样啊?

一杯敬自由 2022-09-18 20:52:24

文字截断,加个tips小框框显示全部,因为就算宽度加大行高不固定表格会很不好看。建议

油焖大侠 2022-09-18 20:52:24

在对应的 el-table-column 上添加 show-overflow-tooltip 属性,实现溢出隐藏,以Tooltip形式展示全部内容。

官方文档-参考一下

当内容过长被隐藏时显示 tooltip。

蓝海似她心 2022-09-18 20:52:24

用的是ele不?表格有个展开行

迷你仙 2022-09-18 20:52:24

iview应该有这个属性的
clipboard.png

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文