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

vue.js table 前端

如图，我这个字段数据太多了。一般遇到这种问题怎么处理？？

阅读 1.1k

评论 更新于 2019-07-04

 

6 个回答

得票时间

kidddder

•  

• 546

===================================正确答案=================================================
用的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)
              ])
            }
          },

评论 赞赏 2019-07-04

木马啊

•  

• 5.7k

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

评论 赞赏 2019-07-03

vannvan

•  

• 333

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

评论 赞赏 2019-07-03

ntnyq

•  

• 1.2k
•  

•  

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

官方文档-参考一下

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

评论 赞赏 2019-07-03

toesbieya

•  

• 543

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

评论 赞赏 2019-07-04

lizitang

•  

• 105
•  

•  

iview应该有这个属性的

评论 赞赏 2019-07-04

 

原文地址：https://segmentfault.com/q/1010000019654986