vue3 TS 如何实现列宽可拖拽
时间: 2024-10-16 11:19:42 浏览: 10
在 Vue 3 中,结合 TypeScript 使用 Element UI 的 Data Table 组件并实现列宽可拖拽功能,你可以按照以下步骤操作:
1. 首先,安装必要的依赖:
```
npm install element-ui@latest @types/element-ui // 如果还没有安装,需要安装Element UI的TypeScript支持
```
2. 导入所需的组件和库:
```typescript
import { Component, Prop } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
```
3. 创建一个 Column 类型,用于定义列配置,包括初始宽度和允许拖动的标志:
```typescript
type TableColumn = {
key: string;
label: string;
prop: string;
width: number; // 初始列宽
resizable: boolean; // 是否允许拖拽调整
};
```
4. 定义表格组件,并使用 Prop 接收列配置数组:
```typescript
@Component({
props: {
columns: {
type: Array<TableColumn>,
required: true,
},
},
})
export default class MyTable extends Component {
// ...
}
```
5. 在模板中使用 ElTable 和 ElTableColumn,并设置列的 resizble 属性:
```html
<template>
<el-table :data="tableData" :columns="columns">
<!-- ... -->
<el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :width="column.width" resizable></el-table-column>
</el-table>
</template>
```
6. 实现列宽变化后的响应处理,可以监听 `el-table-column-resize-end` 事件,然后更新列的宽度:
```typescript
export default class MyTable extends Component {
getNewWidth(column: any, oldWidth: number, newWidth: number): void {
this.$set(column, 'width', newWidth);
}
watchColumns($watcher: Function, newValue: any[], oldValue: any[]) {
$watcher(newValue, (newColumns) => {
newColumns.forEach((column, index) => {
if (column.resizable && column.width !== oldValue[index].width) {
const handleResizeEnd = () => this.getNewWidth(column, oldValue[index].width, column.width);
document.addEventListener('el-table-column-resize-end', handleResizeEnd);
// 调整结束后记得移除事件监听
const originalColumn = oldValue[index];
originalColumn.$on('el-table-column-resize-end', () => {
document.removeEventListener('el-table-column-resize-end', handleResizeEnd);
});
}
});
}, { deep: true });
}
mounted() {
this.watchColumns(this.columns);
}
beforeDestroy() {
this.columns.forEach((column) => {
if (column.resizable) {
column.$off('el-table-column-resize-end');
}
});
}
}
```
现在你已经实现了一个可拖拽列宽的 Vue 3 + TypeScript 表格。当用户拖动列头结束时,列的宽度会自动更新。
阅读全文