vxetable 表格列宽可以自定义拖拽怎么实现

在 `vxetable` 中，实现表格列宽可以自定义拖拽的方式，可以通过配置 `column-resizing` 属性来实现。

具体来说，你需要在 `columns` 属性中为每一列设置 `resizable: true`，以指示该列可以进行列宽调整。然后，在 `tableProps` 属性中，你可以将 `column-resizing` 属性设置为一个对象，该对象包含一个 `handleWidth` 属性（可选），以指定列调整的手柄宽度，和一个 `minWidth` 属性（可选），以指定列的最小宽度。

例如，下面是一个实现了自定义拖拽表格列宽的 `vxetable` 示例代码：

<template>
  <vxe-table
    :data="tableData"
    :columns="tableColumns"
    :table-props="tableProps"
  />
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 22, gender: 'Male' },
        { name: 'Jane', age: 30, gender: 'Female' },
        { name: 'Bob', age: 45, gender: 'Male' }
      ],
      tableColumns: [
        { field: 'name', title: 'Name', resizable: true },
        { field: 'age', title: 'Age', resizable: true },
        { field: 'gender', title: 'Gender', resizable: true }
      ],
      tableProps: {
        columnResizing: {
          handleWidth: 5,
          minWidth: 50
        }
      }
    }
  }
}
</script>

在上面的代码中，`tableData` 和 `tableColumns` 分别是表格的数据和列定义，其中每一列都设置了 `resizable: true`，以允许列宽调整。在 `tableProps` 中，我们将 `column-resizing` 设置为一个对象，其中 `handleWidth` 属性设置为 `5`，以指定列调整的手柄宽度为 `5px`，并将 `minWidth` 属性设置为 `50`，以指定列的最小宽度为 `50px`。

这样，在 `vxetable` 中，你就可以通过简单的配置实现表格列宽可以自定义拖拽了。