【vue && ant design vue】利用vue-draggable-resizable插件实现表格拖拽

最新推荐文章于 2025-04-23 07:08:25 发布

谭CV

最新推荐文章于 2025-04-23 07:08:25 发布

阅读量1.8k

点赞数 2

分类专栏： ant design vue vue工作文章标签： antdv表格拖拽 vue表格拖拽利用插件实现表格拖拽

本文链接：https://blog.csdn.net/THcoding_Cat/article/details/113865034

版权

就很坑，为什么ant design vue没有表格拖拽？这应该是一个常用并且基本的组件功能，elementui的表格拖拽却如此丝滑。。。

官网上说使用vue-draggable-resizable插件来实现，拖拽了一下官网上实现的，真的很丝滑，但是自己做完后，卡卡卡卡卡卡顿。。。

1.下载

为什么我这里指定了版本？？？因为别的版本我试了，同样的代码，这个版本行，别的版本不行，，，就能用就行

npm i vue-draggable-resizable@2.1.0

2.实现

/**
 * 表格列拖拽
 * @param { 表格columns } tbCols 
 */
function initDrag(tbCols) {

  const draggingMap = {};

  tbCols.forEach(col => {
    draggingMap[col.key] = col.width;
  });

  const draggingState = Vue.observable(draggingMap);

  return (h, props, children) => {
    let thDom = null;
    const { key, ...restProps } = props;
    const col = tbCols.find((item) => {
      const k = item.dataIndex || item.key;
      return k === key;