el-table show-overflow-tooltip设置宽度

可以通过以下两种方法设置 `el-table` 中 `show-overflow-tooltip` 的宽度：

1. 使用 `tooltip-content` 插槽，手动控制 tooltip 内容的宽度。例如：

<el-table-column label="Name" prop="name" show-overflow-tooltip>
  <template slot-scope="{row}">
    <div slot="tooltip-content" style="max-width: 200px">{{ row.name }}</div>
    {{ row.name }}
  </template>
</el-table-column>

在这个例子中，我们将 `tooltip-content` 插槽定义为一个 `<div>`，并设置最大宽度为 200 像素。

2. 使用 CSS 样式控制 tooltip 的宽度。例如：

.el-tooltip__popper {
  max-width: 200px;
}

在这个例子中，我们使用 CSS 样式来控制 tooltip 的最大宽度为 200 像素。请注意，这种方法会影响所有 `el-table` 中的 tooltip。如果需要对不同的 `el-table` 中的 tooltip 进行不同的宽度控制，应该使用第一种方法。

相关问题

element puls el-table show-overflow-tooltip设置宽度

要设置 element-ui 中 el-table 组件的列宽度和溢出提示，你可以使用 show-overflow-tooltip 属性和 :min-width 和 :max-width 来实现。

首先，在你的 el-table 列定义中，添加 :min-width 和 :max-width 属性来设置列的宽度范围。例如：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="Name" :min-width="100" :max-width="200"></el-table-column>
  <el-table-column prop="age" label="Age" :min-width="80" :max-width="120"></el-table-column>
</el-table>

在上面的例子中，第一列的宽度将在 100px 到 200px 之间，第二列的宽度将在 80px 到 120px 之间。

接下来，为 el-table 组件添加 show-overflow-tooltip 属性，以启用溢出提示。例如：

<el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
  <!-- 列定义 -->
</el-table>

设置了 show-overflow-tooltip 属性后，当列内容溢出时，将显示一个提示框来展示完整内容。

希望这能帮到你！如果还有其他问题，请随时提问。

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