数字中国建设峰会 官方网站网络营销软文案例

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

---

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，添加列宽调整功能Table12

📚页面效果

📚指令输入

在“加载状态指示器”功能不变的情况下，添加新功能“支持列宽调整”，并写出完整代码

📚think

好的，我现在需要帮助用户在现有的Vue3表格组件中添加“支持列宽调整”的功能，同时保留已有的“加载状态指示器”功能。用户已经提供了之前的代码，我需要先理解现有代码的结构和功能，然后找到合适的位置添加列宽调整的逻辑。

首先，回顾之前的代码，用户已经实现了一个功能丰富的表格组件，包括数据展示、分页、排序、行选择、搜索、空状态提示以及加载状态指示器。现在需要添加列宽调整功能，允许用户通过拖拽列头的分隔线来调整列的宽度。

接下来，我需要考虑如何在Vue3的组合式API中实现这一功能。列宽调整通常涉及以下几个步骤：

1. 检测用户拖拽事件：在列头的右侧添加一个可拖拽的区域，监听鼠标按下事件开始调整。

2. 计算宽度变化：在鼠标移动时，计算新的列宽，并更新列的样式。

3. 更新列配置：将调整后的列宽同步到父组件，可能需要使用emit事件来传递新的列配置。

4. 样式调整：确保拖拽手柄的样式和交互反馈（如光标变化、辅助线）正确显示。

接下来，我需要检查现有代码的结构，找到合适的位置插入这些逻辑。观察到在模板中，列头是通过th元素渲染的，每个th对应一个列。因此，应该在每个th元素中添加拖拽手柄，并绑定相关的事件处理函数。

在脚本部分，需要引入新的响应式变量来跟踪拖拽状态，如isResizing、resizingIndex、startX、startWidth等。此外，还需要在onMounted和onBeforeUnmount生命周期钩子中处理事件的绑定和解绑，以避免内存泄漏。

考虑到用户要求使用普通JavaScript而非TypeScript，需要确保代码中没有类型注解。同时，要确保新增的功能不会影响已有的加载状态指示器和其他功能，比如在加载时禁用拖拽功能。

在样式方面，需要为拖拽手柄添加CSS样式，如定位、光标形状、背景颜色等，并在拖拽过程中显示辅助线以提升用户体验。还需要处理拖拽时的用户选择行为，防止文本被选中影响操作。

最后，测试新增功能是否与现有功能兼容，例如在调整列宽时，分页、排序、行选择等是否正常工作，加载状态是否覆盖整个表格区域，包括新增的拖拽手柄。

现在，根据上述思考，整合代码。在模板中添加拖拽手柄元素，绑定鼠标事件；在脚本中实现事件处理逻辑；在样式中添加相关CSS。确保所有改动与现有代码无缝衔接，并处理可能的边界情况，如最小列宽限制、多列同时调整等。

📘组件代码

以下是整合加载状态和列宽调整功能的完整代码：

<!-- components/Table/Table.vue -->
<template><div class="ds-table" :class="[`table-size-${size}`, { 'table-stripe': stripe, 'table-border': border }]"ref="tableContainer"><!-- 加载遮罩层 --><div v-if="loading" class="loading-mask"><div class="loading-content"><slot name="loading"><div class="default-loading"><div class="loading-spinner"></div><div class="loading-text">{{ loadingText }}</div></div></slot></div></div><!-- 搜索框 --><div v-if="showSearch" class="table-search"><inputv-model="searchKeyword"placeholder="搜索..."@input="handleSearch"class="search-input":disabled="loading"/></div><!-- 表格容器 --><div class="table-container"><table ref="tableEl"><thead><tr><!-- 选择列 --><th v-if="rowSelection" :class="headerAlignClass"class="selection-column":style="{ width: selectionColumnWidth }"><div class="header-content"><inputtype="checkbox":checked="allSelected"@change="toggleAllSelection":disabled="loading"/></div><div v-if="resizable" class="resize-handle"@mousedown.prevent="startResize('selection', $event)"></div></th><!-- 数据列 --><thv-for="(col, colIndex) in columns":key="col.dataIndex":class="[headerAlignClass, { sortable: sortable && col.sortable }]":style="{ width: col.width || 'auto' }"><div class="header-content"><slot :name="`header-${col.dataIndex}`" :column="col"><span @click="handleSort(col)">{{ col.title }}<span v-if="sortable && col.sortable" class="sort-icon">{{ sortedColumn.field === col.dataIndex ? (sortedColumn.order === 'asc' ? '↑' : '↓') : '' }}</span></span></slot></div><div v-if="resizable" class="resize-handle"@mousedown.prevent="startResize(colIndex, $event)"></div></th></tr></thead><tbody><!-- 空状态 --><tr v-if="showEmpty" class="empty-row"><td :colspan="totalColumns"><slot name="empty"><div class="empty-content"><svg class="empty-icon" viewBox="0 0 1024 1024"><path d="M832 320H192v448h640V320z m-64 384H256V384h512v320z m64-416h-64v-64h64v64z m0-128H192v64h640v-64zM128 256h64v512H128z m704 512h64V256h-64v512z"/></svg><div class="empty-text">{{ emptyText }}</div></div></slot></td></tr><!-- 数据行 --><template v-else><trv-for="(row, index) in processedData":key="rowKey ? row[rowKey] : index":class="{'selected-row': isRowSelected(row),'stripe-row': stripe && index % 2 === 0}"@click="handleRowClick(row)"><!-- 选择列 --><td v-if="rowSelection" :class="cellAlignClass":style="{ width: selectionColumnWidth }"><inputtype="checkbox":checked="isRowSelected(row)"@change="toggleRowSelection(row)":disabled="loading"/></td><!-- 数据列 --><tdv-for="col in columns":key="col.dataIndex":class="cellAlignClass":style="{ width: col.width || 'auto' }"><slot :name="`cell-${col.dataIndex}`" :row="row" :value="row[col.dataIndex]">{{ row[col.dataIndex] }}