建议表格增加拉动表格头部列边缘调整列宽度

[XJH0415]

Subject of the feature

很多情况，表格的宽度往往都不能很好的适应，因为数据的长度上不可控，采用过长隐藏的方案会导致数据不易阅读，采用换行的方案的话表格的整体布局又显得杂乱

Problem

建议给表格增加可以拖动表头列边缘自由调整，这样便可以更方便的查看到想要的数据又能保证布局美观

Expected behaviour

我自己试着封装了，最终以失败告终--！，此功能非常实用，相信会有很多人会喜欢这个功能，希望vben能实现。

Alternatives

antd vue 的table 提供了一个props.components 可以使用它来实现，拖动组件可以使用vue3-draggable-resizable（供参考）来实现。

[TonyLuo]

+1

[darkhorse007]

+1

[Carnia]

解决办法：

• 在src\components\Table\src\BasicTable.vue的setup返回值中添加方法

  const resizeColumn = (w, col) => {
    setCacheColumnsByField(col.dataIndex, { width: w });
  };

并在setup的函数最后将这个方法return出去

• 然后在src\components\Table\src\BasicTable.vue中模板的Table标签中添加属性：
  @resize-column="resizeColumn"

2022年5月31日补充： column 要加 resizable: true

[Wang62646264]

解决办法：

• 在src\components\Table\src\BasicTable.vue的setup返回值中添加方法

  const resizeColumn = (w, col) => {
    setCacheColumnsByField(col.dataIndex, { width: w });
  };

并在setup的函数最后将这个方法return出去

• 然后在src\components\Table\src\BasicTable.vue中模板的Table标签中添加属性：
  @resize-column="resizeColumn"

没有用啊。。。

[JamesHardoon]

解决办法：

• 在src\components\Table\src\BasicTable.vue的setup返回值中添加方法

  const resizeColumn = (w, col) => {
    setCacheColumnsByField(col.dataIndex, { width: w });
  };

并在setup的函数最后将这个方法return出去

• 然后在src\components\Table\src\BasicTable.vue中模板的Table标签中添加属性：
  @resize-column="resizeColumn"

没有用啊。。。
+1

[shuperry]

@JamesHardoon @Wang62646264 怪了，我这里试了可以拖动列宽啊，功能非常完美

[jareygu]

@JamesHardoon @Wang62646264 column 要加 resizable: true

[shuperry]

是的，resizable是必须要写的，minWidth 和 maxWidth 看需要可以不写，再加上上面的代码，就可以了

[Wang62646264]

您好，这些都加过了，但是在column里面加 提示错误 

…

------------------ 原始邮件 ------------------ 发件人: ***@***.***>; 发送时间: 2022年5月31日(星期二) 下午5:39 收件人: ***@***.***>; 抄送: ***@***.***>; ***@***.***>; 主题: Re: [vbenjs/vue-vben-admin] 建议表格增加拉动表格头部列边缘调整列宽度 (Issue #1367) 是的，resizable是必须要写的，minWidth 和 maxWidth 看需要可以不写，再加上上面的代码，就可以了 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[jareygu]

还要注意 column 必须有 dataIndex 属性，且唯一

const resizeColumn = (w, col) => {
  setCacheColumnsByField(col.dataIndex, { width: w });
};

该方法拖动时会根据 dataIndex 找到 column

如果需要 renderCell，dataIndex 仍需要随便起个名字

比如

import { BasicColumn } from '/@/components/Table/src/types/table';

const columns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'name',
    resizable: true,
  },
  {
    title: '状态',
    dataIndex: 'statusRender',
    format: (text, record) => getStatusName(record.status),
    resizable: true,
  },
]

[Wang62646264]

还要注意 column 必须有 dataIndex 属性，且唯一

const resizeColumn = (w, col) => {
  setCacheColumnsByField(col.dataIndex, { width: w });
};

该方法拖动时会根据 dataIndex 找到 column

如果需要 renderCell，dataIndex 仍需要随便起个名字

比如

import { BasicColumn } from '/@/components/Table/src/types/table';

const columns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'name',
    resizable: true,
  },
  {
    title: '状态',
    dataIndex: 'statusRender',
    format: (text, record) => getStatusName(record.status),
    resizable: true,
  },
]

我这边提示
不能将类型“{ title: string; dataIndex: string; width: number; resizable: true; }”分配给类型“BasicColumn”。
对象文字可以只指定已知属性，并且“resizable”不在类型“BasicColumn”中。

[jareygu]

还要注意 column 必须有 dataIndex 属性，且唯一

const resizeColumn = (w, col) => {
  setCacheColumnsByField(col.dataIndex, { width: w });
};

该方法拖动时会根据 dataIndex 找到 column
如果需要 renderCell，dataIndex 仍需要随便起个名字
比如

import { BasicColumn } from '/@/components/Table/src/types/table';

const columns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'name',
    resizable: true,
  },
  {
    title: '状态',
    dataIndex: 'statusRender',
    format: (text, record) => getStatusName(record.status),
    resizable: true,
  },
]

我这边提示 不能将类型“{ title: string; dataIndex: string; width: number; resizable: true; }”分配给类型“BasicColumn”。 对象文字可以只指定已知属性，并且“resizable”不在类型“BasicColumn”中。

antv是3.x版本吗

[JamesHardoon]

还要注意 column 必须有 dataIndex 属性，且唯一

const resizeColumn = (w, col) => {
  setCacheColumnsByField(col.dataIndex, { width: w });
};

该方法拖动时会根据 dataIndex 找到 column
如果需要 renderCell，dataIndex 仍需要随便起个名字
比如

import { BasicColumn } from '/@/components/Table/src/types/table';

const columns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'name',
    resizable: true,
  },
  {
    title: '状态',
    dataIndex: 'statusRender',
    format: (text, record) => getStatusName(record.status),
    resizable: true,
  },
]

我这边提示 不能将类型“{ title: string; dataIndex: string; width: number; resizable: true; }”分配给类型“BasicColumn”。 对象文字可以只指定已知属性，并且“resizable”不在类型“BasicColumn”中。

在 BasicColumn 的 interface 中添加下 对应的字段

[JamesHardoon]

BasicTable.ve 页面

<Table ref="tableElRef" v-bind="getBindValues" :rowClassName="getRowClassName" v-show="getEmptyDataIsShowTable"
            @change="handleTableChange" @resize-column="resizeColumn">
            <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
                <slot :name="item" v-bind="data || {}"></slot>
            </template>

            <template #[`header-${column.dataIndex}`] v-for="column in columns" :key="column.dataIndex">
                <HeaderCell :column="column" />
            </template>
        </Table>

const resizeColumn = (w, col) => {
  setCacheColumnsByField(col.dataIndex, { width: w });
};

//.....


return {
 resizeColumn,
}

role.ve 页面

<BasicTable @register="registerTable" @change="onChange" @resizeColumn="handleResizeColumn">

</BasicTable>

const columns = [
          {
            title: '角色名称',
            dataIndex: 'roleName',
            width: 100,
            resizable: true,
          },
          {
            title: '角色编码',
            dataIndex: 'roleCode',
            width: 100,
            resizable: true,
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            width: 100,
            resizable: true,
          },
        ]

function resizeColumn(column, width) {
   column.width = width;
}
return {
  resizeColumn,
}

ant-design-vue 是 3.2.2，我这么写，鼠标移上去一点反应都没有，请问各位这么写有问题么 @Wang62646264 @jareygu @shuperry

[shuperry]

@JamesHardoon 看起来倒也没啥问题，引 BasicTable 的时候不需要传 resizeColumn 事件，columns 虽然没有使用类型应该也不影响，BasicTable.vue 里面 resizeColumn 函数的定义要在 setCacheColumnsByField 之后

[JamesHardoon]

BasicTable.vue 里面 resizeColumn 函数的定义要在 setCacheColumnsByField 之后

你好，我试了下，BasicTable.vue 里面 resizeColumn 函数是定义在setCacheColumnsByField 之后的，应该是别的原因造成的，不过还是感谢解答

[Wang62646264]

可以了，搞半天我用的是VBEN简化版的,ant design vue不是最新版本的

[shuperry]

哈哈，简化版有段日子没同步了，所以我最近搭框架就没用简化版

[jieceng]

当几个列的宽度总和不够撑开时，第一次点击会闪烁

[shenmiqiangwudi]

请问下拖动列的时候有没有出现表头表身移动速度不一致的问题呢?

[atrun]

表格使用多级表头时，一级的可以，下层级的拖动列宽失效。

[atrun]

表格使用多级表头时，一级的可以，下层级的拖动列宽失效。

多次尝试，发现加下面，对多级表头也是有效拖动！

<a-table :columns="columns" :data-source="data" @resizeColumn="handleResizeColumn">

return {

  handleResizeColumn: (w, col) => {
    col.width = w;
  },

}

[anncwb]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days