Ant Design of Vue 表格使用 vue-draggable-resizabl -- 固定列问题修复
表格如果加了列拖拽功能,并且设置了列fixed。
出现了一个头疼的现象
问题:
因为拖拽需要设置width。这个时候。你屏幕宽度超过了他们设置的widht之和。Ant Des的表格自适应放宽。可是加了resizabl的列依旧是固定宽度。导致。显示了两个相同的列。还是不一样的长度
解决方式 :
在拖拽/加载时判断是否超长。动态去掉fixed配置项
- 页面引入
-
import vdr from "vue-draggable-resizable-gorkys";
-
import "vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css";
-
import debounce from "lodash/debounce";
- :components='components'
-
this.components = {
-
header: {
-
cell: (h, props, children) => {
-
const { key, ...restProps } = props;
-
// 此处的this.columns 是定义的table的表头属性变量
-
const col = this.columns.find((col) => {
-
const k = col.dataIndex || col.key;
-
return k === key;
-
});
-
-
if (!col || !col.width) {
-
return h("th", { ...restProps }, [...children]);
-
}
-
const { minWidth = 200, maxWidth } = col || {};
-
const dragProps = {
-
key: col.dataIndex || col.key,
-
class: "",
-
attrs: {
-
w: col.width,
-
h: "auto",
-
axis: "x",
-
minWidth,
-
maxWidth,
-
draggable: false,
-
resizable: true,
-
handles: ["mr"]
-
},
-
on: {
-
resizing: (l, t, w) => {
-
col.width = Math.max(w, 1);
-
},
-
resizestop: () => {
-
this.resize();
-
}
-
}
-
};
-
const drag = h(vdr, { ...dragProps }, [...children]);
-
restProps.class = " resize-table-th";
-
return h(
-
"th",
-
{
-
...restProps
-
},
-
[drag]
-
);
-
}
-
}
-
};
- 重新计算表列:this.resize();
记得给表格添加 样式:.draggable-table,设置::scroll="{x:true}"
-
// 动态计算Columns
-
export function calculateColumns(columns) {
-
const domTable =
-
window.document.querySelector(".draggable-table .ant-table-body") || {};
-
const { scrollWidth = 0,clientWidth = 0 } = domTable;
-
scrollX = clientWidth < scrollWidth - 1;
-
if (scrollX) {
-
columns = columns.map(o => {
-
if (o.fixedInit) {
-
o.fixed = o.fixedInit; // 恢复浮动列配置
-
}
-
return o;
-
});
-
} else {
-
columns = columns.map(o => {
-
if (o.fixed) {
-
o.fixedInit = o.fixed;
-
o.fixed = undefined;
-
}
-
return o;
-
});
-
}
-
return columns
-
}
窗口变化都要去更新
-
mounted() {
-
this.$options._resize = debounce(this.resize, 150);
-
window.addEventListener("resize", this.$options._resize);
-
},
-
beforeDestroy() {
-
window.removeEventListener("resize", this.$options._resize);
-
},
样式:
-
// 可拖拽表头表格样式
-
.resize-table-th .vdr {
-
height: 100% ;
-
width: 100% ;
-
padding: @rem7 @rem16 ;
-
border: none;
-
transform: none ;
-
position: relative ;
-
}
-
-
.resize-table-th {
-
padding: 0 ;
-
&:hover .handle-mr {
-
background: @yn-auxiliary-color;
-
}
-
}
-
-
.resize-table-th .handle {
-
cursor: col-resize;
-
border: none ;
-
box-shadow: none ;
-
}
-
-
.resize-table-th .handle-mr {
-
width: 2px ;
-
z-index: 2;
-
cursor: col-resize;
-
background: inherit;
-
border: none;
-
height: calc(100% - @rem12) ;
-
top: @rem6 ;
-
right: 0 ;
-
display: block ;
-
}
然后不论怎么拖拽。变窗口大小。固定列都能正常展示了
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggekki
系列文章
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13