vue3 TS <BasicTable /> 如何实现列宽可拖拽

在 Vue3 中，结合 TypeScript 和 Element UI 的 `<el-table>` 组件，你可以通过以下几个步骤来实现列宽的可拖拽：

1. 首先，在项目中安装 Element Plus（Element UI 的 TypeScript 版本）：

   npm install element-plus@latest typescript

2. 然后，在组件中导入需要的列和表头组件，并配置列宽作为动态属性：

   import { ElColumn, ElTable } from 'element-plus';
   
   interface TableData {
     // 表格数据结构...
   }

   export default {
     components: {
       BasicTable: {
         props: {
           columns: {
             type: Array<ElColumn>,
             default: () => [
               // 每个列的对象需包含width属性，默认值
               { prop: 'property', label: '标题', width: 100 },
               //...
             ]
           },
           data: () => ({
             tableData: [] as TableData[]
           })
         }
       }
     },
     //...
   }

3. 使用 Element Plus 的列宽度插件，例如`el-tooltip-column-width`，它允许你在列头添加一个图标来触发列宽的调整：

   <template>
     <ElTable :data="tableData" :columns="columns">
       <!--... -->
       <template #header-cell="{ column, $index }">
         <div class="column-header-wrapper">
           <span>{{ column.label }}</span>
           <el-tooltip-column-width :dragging="isDragging" @update:width="handleWidthUpdate($index)" />
         </div>
       </template>
       <!--... -->
     </ElTable>
   </template>

   <script>
   import { ref } from 'vue';
   export default {
     setup(props) {
       const isDragging = ref(false);
       const handleWidthUpdate = (index: number, newWidth: number) => {
         // 更新列宽，这里只是示例，你需要根据实际业务逻辑更新对应的列宽度
         props.columns[index].width = newWidth;
       };

       // 其他逻辑...
     },
     methods: {
       // 如果需要，可以在此添加阻止默认事件等处理
     }
   };
   </script>

4. 当用户拖动列头时，`isDragging` 变量会被设置为 true，此时调用 `handleWidthUpdate` 来实时更新列宽。当用户释放鼠标时，`isDragging` 会变回 false。