vue的table 一列的數據太多了怎麼處理??用的iview

vue的table 一列的數據太多了怎麼處理??用的iview

vue.js table 前端

clipboard.png
如圖,我這個字段數據太多了。一般遇到這種問題怎麼處理??

閱讀 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應該有這個屬性的
clipboard.png

評論 讚賞 2019-07-04

 

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章