avue column宽度调整

### 如何在 Avue 表格组件中设置或动态调整列的宽度 #### 设置静态宽度 在 Avue 中，可以通过配置 `column` 的属性来设定每列的固定宽度。具体来说，在定义表格的 `option.column` 配置项时，可以直接为每一列指定 `width` 属性[^1]。 以下是示例代码： ```javascript const option = { column: [ { label: "名称", prop: "name", width: "200px" // 设定该列为固定的200像素宽度 }, { label: "年龄", prop: "age", width: "150px" // 设定该列为固定的150像素宽度 } ] }; ``` 通过上述方式，可以在初始化时为各列分配特定的宽度。 --- #### 动态调整列宽并保存状态 为了支持用户手动调整列宽的功能，可以参考 Vue 和 Element UI 提供的相关功能扩展到 Avue 上。虽然 Avue 自身未直接提供拖拽调整列宽的能力，但可以通过监听事件以及存储机制实现这一需求[^2]。 以下是一个完整的解决方案： 1. **引入必要的依赖** 确保已正确安装和引用 Avue 及其相关依赖[^3]。 2. **实现逻辑** ```javascript export default { data() { return { tableData: [], // 数据源 option: { column: [ { label: "名称", prop: "name" }, { label: "年龄", prop: "age" } ] }, savedColumnWidths: {} // 存储列宽的状态对象 }; }, mounted() { this.restoreColumnWidth(); // 页面加载完成后恢复之前保存的列宽 }, methods: { restoreColumnWidth() { const storedWidths = JSON.parse( localStorage.getItem("customColumnWidths") || "{}" ); this.option.column.forEach(col => { if (storedWidths[col.prop]) { col.width = `${storedWidths[col.prop]}px`; } }); }, saveColumnWidth(prop, newWidth) { this.savedColumnWidths[prop] = parseInt(newWidth); localStorage.setItem( "customColumnWidths", JSON.stringify(this.savedColumnWidths) ); }, handleResize(event, { target }, done) { let currentTarget = event.target; while ( currentTarget && !currentTarget.classList.contains("el-table__header-wrapper") ) { currentTarget = currentTarget.parentNode; } if (!currentTarget) return; const thList = Array.from(currentTarget.querySelectorAll("th")); const resizingColIndex = [...event.path].find(el => el.classList && el.classList.contains("resizing-col-index") ); if (!resizingColIndex) return; const columnIndex = Number(resizingColIndex.dataset.index); document.addEventListener("mousemove", onMouseMove); document.addEventListener("mouseup", onMouseUp); function onMouseMove(e) { const deltaX = e.clientX - resizingColIndex.offsetLeft; const newWidth = Math.max(80, deltaX); // 最小宽度设为80px thList[columnIndex].style.width = `${newWidth}px`; const correspondingProp = this.option.column[columnIndex]?.prop ?? null; if (correspondingProp) { this.saveColumnWidth(correspondingProp, newWidth); } } function onMouseUp() { document.removeEventListener("mousemove", onMouseMove); document.removeEventListener("mouseup", onMouseUp); done(); } } } }; ``` 此方法实现了如下功能： - 用户能够通过鼠标拖拽的方式改变某一列的宽度。 - 调整后的宽度会被自动记录下来并通过浏览器本地存储 (`localStorage`) 进行持久化处理。 - 下次页面重新加载时会读取这些数据并将列宽还原至上次调整的结果。 注意：由于 Avue 并不原生支持此类交互行为，因此需要额外编写一些辅助脚本来完成目标效果。 --- #### 移除多余空白列 当移除了操作列之后，有时会出现多余的空白区域。这通常是因为某些列设置了固定的宽度而其他部分未能及时适配所致。解决办法是在所有列上取消显式的 `width` 定义，允许框架自行计算最佳布局比例。 例如修改选项结构如下即可解决问题： ```javascript { label: "姓名", prop: "username" } // 不再单独声明 width 参数 ``` 这样可以让整个表单更加紧凑美观。 ---