需求:实现一个table表格,在编辑状态下可以对表格中的字段进行修改,其他状态下就是正常的表格
问题:表格中有一个字段内容很长,所以使用了show-overflow-tooltip,将超出的内容隐藏,鼠标放上去悬浮显示,但是这样就造成了,鼠标放在可编辑状态下的单元格上面会有一个黑色的空白悬浮框遮挡
解决方案:使用el-tooltip使数据悬浮显示,使用css样式实现数据一行显示多余的显示省略号
<el-table-column align="center" prop="address" label="备注" width="200">
<template slot-scope="scope">
<el-tooltip
class="item"
v-if="!scope.row.editing"
effect="dark"
:content="scope.row.address"
placement="top"
>
<div
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
<span>{{ scope.row.address }}</span>
</div>
</el-tooltip>
<el-input
v-else
type="textarea"
v-model="scope.row.address"
></el-input>
</template>
</el-table-column>