el-table-column的show-overflow-tooltip内容过长不能完整显示

你可以使用 `tooltip-effect` 属性来设置 tooltip 的显示效果，例如设置为 `light`，这样 tooltip 会在单元格上方显示，并且会跟随鼠标移动，这样可以让你完整地看到单元格的内容。同时，你也可以通过设置 `min-width` 来调整 tooltip 的宽度，使其能够容纳更多的内容。例如：

<el-table-column prop="name" label="姓名" :show-overflow-tooltip="true">
  <template slot-scope="{ row }">
    <div class="cell-ellipsis" :title="row.name">{{ row.name }}</div>
  </template>
</el-table-column>

.cell-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 设置最小宽度为 100px */
  min-width: 100px;
}

// 在 el-table 上设置 tooltip-effect 属性
<el-table :data="tableData" tooltip-effect="light">
  <!-- ... -->
</el-table>

这样就可以让你完整地看到单元格内容了。

相关问题

<el-table-column prop="remark" label="下单制作特殊说明"> <template slot-scope="scope"> <el-input v-model="scope.row.remark" @click="stopPropagation" @mousedown.prevent></el-input> </template> </el-table-column> <el-table-column show-overflow-tooltip width="50" prop="message" label="说明"></el-table-column> <el-table-column show-overflow-tooltip width="50" prop="user" label="运营者"></el-table-column> <el-table-column label-class-name="DisabledSelection" align="center" type="selection" width="90"> </el-table-column>输入框输入影响全选

根据提供的代码，可以看到 "remark" 列对应的输入框绑定了一个 @click 和 @mousedown.prevent 事件，这些事件会阻止事件冒泡和默认行为。这可能会导致在点击输入框时，阻止了表格行被选中的默认行为，从而影响到了全选功能。因此，建议在 @click 和 @mousedown.prevent 事件中，除了阻止默认行为外，也应该手动触发表格行的选中事件，以确保全选功能正常工作。

具体地，可以在事件处理函数中添加以下代码：

stopPropagation(event) {
  // 阻止事件冒泡和默认行为
  event.stopPropagation();
  event.preventDefault();
  
  // 触发表格行的选中事件
  this.$refs.table.toggleRowSelection(this.scope.row);
}

其中，$refs.table 可以替换为你表格组件的引用名。这样，当用户点击输入框时，不仅阻止了默认行为，还手动触发了表格行的选中事件，从而确保全选功能正常工作。

vue+el-table-column的show-overflow-tooltip属性 内容为空时 出现tooltip问题

当 `el-table-column` 中设置 `show-overflow-tooltip` 属性时，如果单元格内容为空，会出现 tooltip 显示的问题。

解决方法是在单元格内部设置一个不可见的空格占位符，例如使用 `&nbsp;`，这样就能正常显示 tooltip 了。

示例代码：

<el-table-column prop="name" label="姓名" show-overflow-tooltip>
  <template slot-scope="{ row }">
    {{ row.name || '&nbsp;' }}
  </template>
</el-table-column>