Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式

更新時間：2022年09月20日 10:28:44 作者：溪午聞璐

在Vue項目中,使用ElementUI渲染表格數(shù)據(jù)時,如果某一個列數(shù)值長度超過列寬,會默認換行,造成顯示不友好,下面這篇文章主要給大家介紹了關于Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式,需要的朋友可以參考下

一、el-table表格

在使用VUE顯示后臺數(shù)據(jù)時，經(jīng)常會遇到數(shù)據(jù)過長，顯示出來的效果很難看，如下圖所示：

上圖中，紅框框出的內(nèi)容由于長度過長，占據(jù)了三行空間，如果內(nèi)容更多的話，占據(jù)行數(shù)就更多了，表格中列數(shù)一多的話，顯出出來的效果會很難看。

為了解決上述問題，我們可以利用<el-table-column>組件提供的一個屬性：:show-overflow-tooltip='true' 添加該屬性，會將過長的部分內(nèi)容隱藏起來，并且在鼠標懸停在內(nèi)容上面時，會以懸浮框的形式將所有數(shù)據(jù)顯示出來，代碼如下所示：

<el-table-column 
    label="DeviceId" 
    prop="deviceId" 
    :show-overflow-tooltip='true'>
</el-table-column>

效果如下圖所示：

從上圖效果中，可以看出，框出的內(nèi)容在顯示時將其過長的部分以省略號...代替，而當鼠標放置到內(nèi)容上面時，包括隱藏數(shù)據(jù)的所有數(shù)據(jù)以懸浮框的形式顯示出來。

這種方法即達到了使頁面美觀，也達到了數(shù)據(jù)顯示的的目的，可以在前端使用表格顯示數(shù)據(jù)的時候采用。

但是，這種方法有一個很大的弊端，即鼠標懸停顯示的數(shù)據(jù)無法復制。為了解決這個問題，可以在表格中采用Popover 彈出框組件。

二、Popover 彈出框

element-ui中，表格使用Popover 彈出框組件代碼如下：

            <!-- <el-table-column label="DeviceId" prop="deviceId" :show-overflow-tooltip='true'></el-table-column> -->
			<el-table-column label="deviceId" prop="deviceId">
				<template slot-scope='scope'>
					<el-popover
					placement="top-start"
					width="400"
					trigger="hover">
						<span>{{scope.row.deviceId}}</span>
						<span slot="reference">{{scope.row.deviceId.substr(1,20) + '...'}}</span>
					</el-popover>
				</template>
			</el-table-column>

最終效果如下所示：