ElementUI Table 拖动列改变宽度事件@header-dragend(文字换行,导致底部拖动条消失的bug)
header-dragend
事件在 ElementUI Table 组件中用于处理表头拖动结束后的行为。如果你遇到文字换行导致底部拖动条消失的问题,可能是因为表格的宽度没有正确地更新以适应新的列宽。
为了解决这个问题,你可以在 header-dragend
事件处理函数中重新计算表格宽度并更新表格样式。以下是一个简单的示例代码:
<template>
<el-table
:data="tableData"
@header-dragend="handleHeaderDragEnd"
>
<!-- 列定义 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
// 数据
],
};
},
methods: {
handleHeaderDragEnd(newWidth, oldWidth, column, event) {
// 根据新宽度重新设置表格宽度
this.$nextTick(() => {
const table = this.$refs.myTable; // 假设你的表格设置了ref="myTable"
table.$el.style.width = 'auto'; // 重置宽度
});
},
},
};
</script>
在这个示例中,handleHeaderDragEnd
方法会在拖动表头结束后被调用。我们使用 this.$nextTick
确保 DOM 已经更新,并且通过直接操作 DOM 元素的样式来强制更新表格宽度。这样可以确保表格宽度正确适应内容,从而避免拖动条消失的问题。
评论已关闭