Ant-design-vue: table可伸缩列

[herosPan]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.6.0

Environment

window10 ,google版本 75.0.3770.142 vue2.6.10，ant-design-vue 1.6，vue-draggable-resizable 2.1.0

Reproduction link

https://github.com/vueComponent/ant-design-vue-pro

Steps to reproduce

https://codesandbox.io/s/competent-wildflower-ghr24?file=/src/App.vue codesandbox中没有报错但vue-draggable-resizable版本升到2.1.0以上会有问题；我本地程序会报以下错误

./src/views/data-fusion/DataClean.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/data-fusion/DataClean.vue?vue&type=script&lang=js&) 608:35
Module parse failed: Argument name clash (608:35)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|         name: "ResizeableTitle",
|         functional: true,
>         render: function render(h, h, props, children) {
|           var thDom = null;

What is expected?

查找问题及调整

What is actually happening?

我本地程序会错误

[herosPan]

在ant-design-vue-pro基础开发，有谁知道需要什么依赖包及配置。。。

[zheng-qipeng]

issue #1870

[tangjinzhou]

所以是 依赖包的问题 ？

[herosPan]

所以是 依赖包的问题 ？

暂时没确定问题，在codesandbox中代码相同可以执行，本地vue-antd-pro基础上 vue，ant-design-vue ，vue-draggable-resizable 版本都相同执行不成功，所以感觉可能是其他依赖或配置影响的

[Booom007]

render函数中const ResizeableTitle = ({ props, children }) => {这样就行了

[xiaofuliang]

我是改成{ props, children }可以了，但是表头无法拖动，这是什么原因？

[xiaofuliang]

@herosPan 请问你的解决了吗，我的加了这代码还是无法 拖动

[Booom007]

@herosPan 请问你的解决了吗，我的加了这代码还是无法 拖动

引入import 'vue-draggable-resizable/dist/VueDraggableResizable.css'样式后你看看你的有没有问题，
我引入后拖动框会延后一列，观察看到是transform中translate默认是transform:translate(col.width,0px)。我在return的th中的vue-draggable-resizable 里面添加了style="transform:translate(0px,0px)"，然后在class样式table-draggable-handle里面添加 position: absolute;
box-sizing: border-box;，就不用引入vue-draggable-resizable/dist/VueDraggableResizable.css这个样式了

[xiaofuliang]

@Booom007 用你这个方法 是可以了，但是排序又没有用了，算了，我这先不弄可伸缩了

[herosPan]

已解决，resizeableTitle改为驼峰模式就不报错了，之前是首字母大写的ResizeableTitle，不知是不是load版本的问题

this.components = {
        header: {
          cell: resizeableTitle
        }
      }

[bagvj]

@herosPan 请问你的解决了吗，我的加了这代码还是无法 拖动

不能拖动的问题已解决。在.table-draggable-handle里加上 transform: none !important; position: absolute; 即可。ResizeableTitle改成resizeableTitle。

[yxyxx]

@herosPan 请问你的解决了吗，我的加了这代码还是无法 拖动

不能拖动的问题已解决。在.table-draggable-handle里加上 transform: none !important; position: absolute; 即可。ResizeableTitle改成resizeableTitle。

老哥稳

[Booom007]

推荐使用vxe-table

------------------ 原始邮件 ------------------
发件人: "vueComponent/ant-design-vue" <[email protected]>;
发送时间: 2020年12月7日(星期一) 下午5:09
收件人: "vueComponent/ant-design-vue"<[email protected]>;
抄送: "Boooom"<[email protected]>;"Mention"<[email protected]>;
主题: Re: [vueComponent/ant-design-vue] table可伸缩列 (#2269)

@herosPan 请问你的解决了吗，我的加了这代码还是无法 拖动

不能拖动的问题已解决。在.table-draggable-handle里加上 transform: none !important; position: absolute; 即可。ResizeableTitle改成resizeableTitle。

老哥稳

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.