vue3中的el-table-column实现拖动调整列宽，并且可以保存调整后的列宽。

在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项目配置正确。