vue字符串超长部分展示省略号

vue字符串超长部分展示省略号

解决办法有两种方式，一种用vue自带的方法，另一种是通过css来实现。
1、el-table-column如果展示的是两行，建议使用css的方式来实现

<el-table-column
	prop="cityFleetid,auditstatus"
	label="车队编码"
	width="350px">
	<template slot-scope="scope">
		<div>
			<div style="text-align:left;margin-left:15%">
				<span 
					class="link-type"
					style="display :inline-block;width:100%;overflow:hidden;text-Overflow:ellipsis;white-Space:nowrap;"
					:title="scope.row.cityFleetid">{{ scope.row.cityFleetid }}
				</span>
			<div style="text-align:left;margin-left:15%">
				<el-tag :type="(scope.row.auditstatus == '0' ？ ‘’ : 'success')" size="mini">
				{{ scope.row.auditstatus == '0' ? '初始值' : '审核通过' }}
				</el-tag>
			</div>
		</template>
	</el-table-column>

效果图如下：

温馨提示：关键代码是第10和11行呦！
2、el-table-column如果展示的是一行，建议使用vue自带的方法来实现

<el-table-column
	:show-overflow-tooltip="true"
	prop="carKindCode"
	label="车辆种类">
</el-table-column>

效果图如下：

温馨提示：关键代码是2行呦！
注：如果第一种情况使用vue自带的方法实现会出现如下状况，我暂时未找到解决方法，欢迎各位留言交流

如果想要折行，并在最后一行超长部分展示…请查看这篇文章：https://blog.csdn.net/RAGACM/article/details/114589783?spm=1001.2014.3001.5501