ant design vue的table表头拖拉适应宽度。
在data中的columns中每一列会有固定的宽度(如果不给定宽度,拉拽则不起作用)。如果是这样的结果那么我们需要根据文档来设置components以及结合《vue-draggable-resizable》插件。在data数据中定义,data (){return {components: { header: { cell: this.changeTitle } },}}methods(){chan
·
在data中的columns中每一列会有固定的宽度(如果不给定宽度,拉拽则不起作用)。如果是这样的结果那么我们需要根据文档来设置components以及结合《vue-draggable-resizable》插件。
在data数据中定义,
data (){
return {
components: { header: { cell: this.changeTitle } },
}
}
methods(){
changeTitle(h, props, children) {
let draggingState = {};
this.columns.forEach(col => {
draggingState[col.key] = col.width;
});
const { key, ...restProps } = props;
let thDom = null;
const col = this.columns.find(col => {
const k = col.dataIndex || col.key;
return k === key;
});
if (!col || !col.width) {
return <th {...restProps}>{children}</th>;
}
const onDrag = x => {
draggingState[key] = 0;
col.width = Math.max(x, 10);
};
const onDragstop = () => {
draggingState[key] = thDom.getBoundingClientRect().width;
};
return (
<th
{...restProps}
v-ant-ref={r => (thDom = r)}
width={col.width}
class="resize-table-th"
>
{children}
<vue-draggable-resizable
key={col.key}
class="table-draggable-handle"
w={10}-默认宽度
x={draggingState[key] || col.width}
z={1}
axis="x"
draggable={true}
resizable={false}
onDragging={onDrag}-每当拖动组件时调用
onDragstop={onDragstop}-每当组件停止拖动时调用
></vue-draggable-resizable>
</th>
);
},
}
大家有兴趣可以尝试一下。有什么问题,欢迎在楼下评论。
更多推荐
已为社区贡献5条内容
所有评论(0)