原生的show-overflow-tooltip=“true” 不能满足条件,使用插槽自定义编辑;
旧code
<el-table-column prop="reason" label="原因" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="params" label="参数" align="center" :show-overflow-tooltip="true" />
新code
<el-table-column prop="reason" label="原因" align="center">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" placement="top-start">
<div slot="content">{{ scope.row.reason }}</div>
<div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
{{ scope.row.reason }}
</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="params" label="参数" align="center">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" placement="top-start">
<div slot="content">{{ scope.row.params }}</div>
<div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
{{ scope.row.params }}
</div>
</el-tooltip>
</template>
</el-table-column>
新css样式
.el-tooltip__popper {
max-width: 500px !important; /* 你想要的宽度 */
}
效果