在Vue 3中，可以使用Element Plus（Vue 3的Element UI版本）中的el-table和el-table-column组件来实现列宽的拖动调整功能。此外，为了保存调整后的列宽，你需要监听列宽调整的事件，并将调整后的列宽保存到本地存储或者发送到服务器。
以下是一个简单的例子，展示如何实现列宽拖动和保存功能：
<template>
<el-table
:data="tableData"
border
style="width: 100%"
@header-dragend="onDragEnd"
>
<el-table-column
v-for="column in columns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:width="column.width"
></el-table-column>
</el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
const tableData = ref([
// 数据填充
]);
const columns = ref([
{
prop: 'date',
label: '日期',
width: getColumnWidth('date'),
},
{
prop: 'name',
label: '姓名',
width: getColumnWidth('name'),
},
// 其他列定义
]);
// 从本地存储加载列宽
function getColumnWidth(prop) {
const widths = localStorage.getItem('columnWidths');
return widths ? JSON.parse(widths)[prop] : null;
}
// 保存列宽到本地存储
function saveColumnWidth(prop, width) {
const widths = localStorage.getItem('columnWidths') || '{}';
const columnWidths = { ...JSON.parse(widths), [prop]: width };
localStorage.setItem('columnWidths', JSON.stringify(columnWidths));
}
// 监听列拖动结束事件
function onDragEnd(column, event, order) {
const width = column.width;
const prop = column.property;
saveColumnWidth(prop, width);
ElMessage.success(`列宽调整成功，${prop}: ${width}`);
}
// 组件加载完成后，从本地存储加载列宽
onMounted(() => {
columns.value.forEach(column => {
const savedWidth = getColumnWidth(column.prop);
if (savedWidth) {
column.width = savedWidth;
}
});
});
</script>
在这个例子中，我们定义了一个columns响应式数据，包含每列的属性、标签和宽度。我们还实现了getColumnWidth、saveColumnWidth和onDragEnd函数，分别用于从本地存储加载列宽、保存列宽和处理列拖动结束事件。
当你拖动列宽调整列宽时，el-table的@header-dragend事件会触发onDragEnd函数，该函数会保存调整后的列宽到本地存储，并给出成功的提示信息。
在onMounted钩子中，我们在组件加载完成后从本地存储加载列宽，如果有保存的宽度，则应用到对应的列上。
请确保你的项目中已经包含了Element Plus，并且你的Vue 3项目配置正确。