<el-table :data="taskList" border="true"> 表头可拖动,如何设置拖动最小位置min-width不管用
时间: 2023-12-26 14:04:45 浏览: 77
如果 `min-width` 属性在 `<el-table>` 组件中不起作用,可能是因为 Element UI 的 `<el-table>` 组件内部使用了一些样式规则或 JavaScript 代码来控制表格的布局和行为,覆盖了你设置的 `min-width` 属性。
在这种情况下,你可以尝试使用自定义样式来实现限制拖动的最小位置。你可以通过给表头的列添加一个包裹容器,并设置该容器的最小宽度来实现。以下是示例代码:
```html
<el-table :data="taskList" border="true">
<el-table-column label="任务名称">
<div class="column-wrapper" style="min-width: 100px;">
{{ scope.row.name }}
</div>
</el-table-column>
<el-table-column label="状态">
<div class="column-wrapper" style="min-width: 80px;">
{{ scope.row.status }}
</div>
</el-table-column>
<!-- 其他列 -->
</el-table>
```
在上面的示例中,我们为每个表头列添加了一个 `<div>` 元素,并给它设置了一个名为 `column-wrapper` 的类。通过该类,我们可以为列的包裹容器设置自定义样式,包括最小宽度。
然后,你可以在 CSS 文件中定义 `column-wrapper` 类的样式:
```css
.column-wrapper {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
```
使用自定义样式的方式可以绕过 Element UI 的样式规则,从而实现限制拖动的最小位置。你可以根据具体需求调整最小宽度和其他样式属性。
阅读全文