Table組件設置文字超出寬度顯示省略號，鼠標懸停以懸浮框顯示

 

一、設置文字超出寬度顯示省略號

注意點：

1.  需要指定column的width屬性，否則列頭跟內容可能不對齊。需要留一列不設置寬度以適應彈性布局。

2. 列寬度width必須大於ellipsis的元素寬度，具體大於多少需要通過瀏覽器的console控制台查看

3. 不能直接將column的className設置為目標className

 

css代碼

.col-one-line{
    overflow : hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
    width: 60px;
}

 

關鍵js代碼

       const exceptionCaseListColumn = [
             ...
             {
                title: "承辦人",
                dataIndex: "assignee",
                width: 100,
                render: (text) => {
                    return <span className="col-one-line">{text}</span>
                }
            },
         ...
]

<Table dataSource={bugList}
                           bordered
                           columns={exceptionCaseListColumn}
                           className='bug-manage-list-table'
                           scroll={{y: 800}}
                           onRow={(record) => {
                               return {
                                   onClick: () => {
                                       if (record.id !== this.state.currentSelectedBugId) {
                                           this.setState({
                                               currentSelectedBugId: record.id
                                           })
                                       }
                                   },
                               }
                           }}
                           pagination={false}
                    />

效果

 

 

二、鼠標hover以懸浮框顯示

方法一、

　　使用title，在需要文字提示的元素上增加title屬性。但是懸浮框樣式不美觀

方法二、

　　使用Popover組件

{
                title: "承辦人",
                dataIndex: "assignee",
                width: 100,
                render: (text) => {
                    return <Popover content={text}><span className="col-one-line">{text}</span></Popover>
                }
            }