el-table拖动改变列宽

### 如何在 Element UI 的 el-table 组件中实现拖动调整列宽功能 要在 Element UI 的 `el-table` 组件中实现拖动调整列宽的功能，可以通过引入第三方库（如 `sortablejs` 或其他类似的插件）来扩展组件的行为。此外，还可以通过自定义逻辑和事件监听器来实现这一功能[^1]。 以下是一个基于 `sortablejs` 的实现方式： #### 1. 引入 SortableJS 首先需要安装并引入 `sortablejs` 库： ```bash npm install sortablejs --save ``` 然后在项目中引入该库： ```javascript import Sortable from 'sortablejs'; ``` #### 2. 初始化表格拖拽功能 在 Vue 组件的 `mounted` 钩子中初始化拖拽功能，并绑定到表格的列宽调整逻辑上。例如： ```javascript export default { data() { return { tableData: [ { date: '2016-05-02', name: 'John Doe', address: 'No.1, Street' }, { date: '2016-05-04', name: 'Jane Smith', address: 'No.2, Avenue' } ], columnWidths: {} // 用于存储每列的宽度 }; }, mounted() { this.initResizableColumns(); }, methods: { initResizableColumns() { const table = this.$refs.table.$el.querySelectorAll('.el-table__header-wrapper th'); Array.from(table).forEach((th) => { const resizeHandle = document.createElement('div'); resizeHandle.className = 'resize-handle'; th.appendChild(resizeHandle); let startX, startWidth; let resizing = false; resizeHandle.addEventListener('mousedown', (e) => { resizing = true; startX = e.pageX; startWidth = th.offsetWidth; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); const onMouseMove = (e) => { if (!resizing) return; const newWidth = startWidth + (e.pageX - startX); th.style.width = `${newWidth}px`; this.columnWidths[th.dataset.property] = newWidth; // 保存宽度到 state }; const onMouseUp = () => { resizing = false; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); }; }); } } }; ``` #### 3. 样式调整 为了确保拖拽效果更直观，可以为拖拽手柄添加样式： ```css .resize-handle { position: absolute; right: 0; top: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 10; } ``` #### 4. 动态设置列宽 如果需要在页面加载时恢复之前保存的列宽，可以在 `mounted` 钩子中应用这些宽度： ```javascript mounted() { this.restoreColumnWidths(); this.initResizableColumns(); }, methods: { restoreColumnWidths() { const table = this.$refs.table.$el.querySelectorAll('.el-table__header-wrapper th'); Array.from(table).forEach((th) => { const property = th.dataset.property; if (this.columnWidths[property]) { th.style.width = `${this.columnWidths[property]}px`; } }); } } ``` --- ### 注意事项 1. 如果页面中有多个表格，需要确保每个表格的列宽调整逻辑互不干扰[^2]。 2. 拖拽过程中可能会导致滚动条消失的问题，可以通过动态调整容器宽度或使用 CSS 来避免此问题[^2]。 3. 在某些情况下，可能需要额外处理表头与内容对齐的问题，以确保视觉一致性[^3]。 --- ### 示例代码块 以下是一个完整的示例代码： ```html <template> <el-table ref="table" :data="tableData" style="width: 100%"> <el-table-column prop="date" label="Date" width="180"></el-table-column> <el-table-column prop="name" label="Name" width="180"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </template> <script> import Sortable from 'sortablejs'; export default { data() { return { tableData: [ { date: '2016-05-02', name: 'John Doe', address: 'No.1, Street' }, { date: '2016-05-04', name: 'Jane Smith', address: 'No.2, Avenue' } ], columnWidths: {} }; }, mounted() { this.restoreColumnWidths(); this.initResizableColumns(); }, methods: { initResizableColumns() { const table = this.$refs.table.$el.querySelectorAll('.el-table__header-wrapper th'); Array.from(table).forEach((th) => { const resizeHandle = document.createElement('div'); resizeHandle.className = 'resize-handle'; th.appendChild(resizeHandle); let startX, startWidth; let resizing = false; resizeHandle.addEventListener('mousedown', (e) => { resizing = true; startX = e.pageX; startWidth = th.offsetWidth; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); const onMouseMove = (e) => { if (!resizing) return; const newWidth = startWidth + (e.pageX - startX); th.style.width = `${newWidth}px`; this.columnWidths[th.dataset.property] = newWidth; }; const onMouseUp = () => { resizing = false; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); }; }); }, restoreColumnWidths() { const table = this.$refs.table.$el.querySelectorAll('.el-table__header-wrapper th'); Array.from(table).forEach((th) => { const property = th.dataset.property; if (this.columnWidths[property]) { th.style.width = `${this.columnWidths[property]}px`; } }); } } }; </script> <style> .resize-handle { position: absolute; right: 0; top: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 10; } </style> ``` ---