使用:show-overflow-tooltip="true"
<el-table :data="serviceList" style="width: 100%"><el-table-column align="center" label="序号" prop="index" width="80" fixed /><el-table-column :show-overflow-tooltip="true" align="center" label="中文题目" width="500" fixed><template #default="scope"><el-link class="linkColor" @click="detailService(scope.row)"> {{ scope.row.name }} </el-link></template></el-table-column><el-table-column :show-overflow-tooltip="true" align="center" label="发表刊名" prop="periodical" width="100" /><el-table-column :show-overflow-tooltip="true" align="center" label="所属领域" prop="signory" width="220" /><el-table-column :show-overflow-tooltip="true" align="center" label="所属单位" prop="platAndEnterPriseInfo" width="200" /><el-table-column :show-overflow-tooltip="true" align="center" label="作者" prop="personnel" width="200" /><el-table-column :show-overflow-tooltip="true" align="center" label="发表日期" prop="outputTime" width="120" /><el-table-column :show-overflow-tooltip="true" align="center" label="更新时间" prop="updateTime" width="100" fixed="right"/><!-- 没有审核中的状态 暂时未做判断 --><el-table-column align="center" label="操作" prop="name" width="150" fixed="right"><template #default="scope"><el-tooltip content="编辑" placement="top"><el-button link type="warning" icon="Edit" @click="editService(scope.row)"></el-button></el-tooltip><el-tooltip content="详情" placement="top"><el-button link type="success" icon="View" @click="detailService(scope.row)"></el-button></el-tooltip><!-- <el-text class="mx-1" type="danger" @click="deleteServiceItem(scope.row)" >删除</el-text> --></template></el-table-column></el-table>
注意:这里是使用了Tooltip 文字提示组件
实现溢出内容自动隐藏,可使用css,可以直接给元素标签使用下:show-overflow-tooltip="true"
看此组件是否带了隐藏样式,不行得话,再单独使用如下css实现
.overflow-hidden { overflow: hidden; /* 隐藏溢出内容 */ text-overflow: ellipsis; /* 当文本溢出时显示省略号 */ white-space: nowrap; /* 防止文本换行 */ width: 100px; /* 设置容器宽度以触发溢出 */
}