mafengwo / vue-drag-tree-table Goto Github PK

背景：

1. 针对 issue#8，增加了同级目录之间拖拽的限制条件
2. 针对 issue#26，增加了是否允许被目标元素包含的限制条件
3. 现在接手的项目中有这个需求

具体修改如下（修改处的起始行数以修改后的文件为准）：

// 目录  ./src/lib/dragTreeTable.vue
// 第一处
133       const row = rows[i];
134  +    let dragElementLevel = dragParentNode.firstElementChild.dataset.level;
135  +    let targetElementLevel = row.dataset.level;
136       const rx = func.getElementLeft(row);

// 第二处
140       if (x > rx && x < (rx + rw) && y > ry && y < (ry + rh)) {
141  +      // 是否仅允许同级目录之间拖拽
142  +      if (this.onlyAllowSiblingDrag ? dragElementLevel !== targetElementLevel : false) return;
143         const diffY = y - ry

// 第三处
155       } else if (diffY/rowHeight > 1/4) {
156  +      // 是否允许被目标元素包含
157  +      if (!this.allowedIncluded) return;
158         if (hoverBlock.children[1].style.opacity !== '0.5') {

修改之后，调用如下（根据自己的需求修改 onlyAllowSiblingDrag 和 allowedIncluded 的值）：

<dragTreeTable
  :data="treeData"
  :onDrag="onTreeDataChange"
  :isdraggable="true"
  :fixed="false"
  :height="400"
  :onlyAllowSiblingDrag="true"
  :allowedIncluded="false"></dragTreeTable>

引入移动端 ， 拖动不了····

dragTreeTable里resetTreeData的pushData这个方法在走到子节点的遍历时，其实needPushList里已经有一个元素了，但是方法的开始是let order = 0
应该是let order = needPushList.length
否则移动后前两个元素的order都会是0

when the item dragged to the target row, We want to highlight target row or dragged item. is ther any way to apply customized css.

你好，关于每次拖拽完如何知道被拖拽的元素的父级ID，如果再外面一层就返回空

在一些特定场景下，如：第一列为selection，单元格居左对齐，且这个单元格的宽度特别宽的时候，视觉效果不是很好，此时希望可以让标题的对齐对应上单元格的对齐方式

希望能拿到targetID和dragId。在onTreeDataChange中给到我。另外希望参与这个项目,嘻嘻

有个需求就是可以 对树形表格当前行的数据 进行增删查改 😂 这个要如何去做😎

类似表格组件的筛选功能

你好 某一行有lists属性 但不写open属性 则无法展开 不知道这是个bug还是特意做的 :)

Hi,

Thanks for this plugin which is very useful for our requirement. But i saw an issue with IE browser where drag and drop is not working. Can you please help with the fix or have any plan to fix in the future ?

点击编辑怎么获取当前以及父节点的信息

现在有个树形表格使用elementui写的，我想把这个拖拽功能加到里面去 应该怎么做呢

怎么看不到1.17的版本呢

用最新版吧1.2.5

我现在用的是这个1.2.5的版本，还是存在这个问题，没有更新最新的代码吗？

感觉不应该是禁用图标，十字架可拖拽图标更符合,cursor: move;

你好，目前用这个遇到一个问题，需要获取到拖动变更后的数据，默认的方法好像只能得到整个list，请问有方便点的方法吗？谢谢

原谅我这个菜鸡，百思不得其解，在删除事件里获取这行的index，取的值总是-1
这是cloumn里的删除事件：
`actions: [{
text: '删除',
onclick: this.delParameter,
formatter: (index) => {
return '删除 '
}

                    }`

删除事件是这么写得：
delParameter(index){ var rowIndex = $(this).parents(".tree-row").attr("tree-id").index(); console.log(rowIndex); }

当前表格如果出现了滚动条，且滚动最底部，这时拖拽就会出现拖拽的焦点和鼠标错位的现象，这个bug有解决方案了吗

如图所示，当前写法是不会报错的。
但是当我把formatter删除之后会报formatter不是一个方法的错误，如此看来formatter是一个必填参数，那和上面的text是否有一些重复性了？

小白刚开始学，不太懂大佬您的想法，望解答，谢谢

用于选中当前行

当isContainChildren: true, //是否勾选子节点，默认false，有一个bug，我已经修复，GitHub上没有找到你的项目，希望你也能修复下，在row.vue中，onCheckboxClick方法中，this.setAllCheckData这一行改为 this.setAllCheckData([model] || [], !!evt.target.checked)

Hi,
We have much data in the page and made the header to be stay on the page always. Also, we disabled the page scrollbar and used the scrollbar at the div level only. This time, drag and drop functionality is not working. i noticed that plugin is considering page level X and Y coordinates to drop the element. can you fix this issue in the plugin?

Thanks

whenever item dragged from one place to another, empty space/row needed to show the drop item. right now, we are dropping on or above row. its not clear. when the item dragged on, empty space has to show clearly item will be dropped. is there any way to show empty row space?

有一些无意义的操作是否考虑内置禁用？例如：

• 将子节点拖进它的父节点当中，实际父子关系不变
• 将节点拖放到前一个节点的后面，实际顺序不变
• 将节点拖放到后一个节点的前面，实际顺序不变

现在子节点字段为lists，可不可以传入一个prop来自定义子节点的字段名？比如说为child或children

建议新版本lists columns custom_field 三个参数独立传进去，不要杂糅进一个treeData对象，这样我的columns 和custom_field可以放在组件内，lists遇到复杂的业务需求放vuex也不影响，本来想自己fork改一下的，但是不能保持更新，请考虑一下。

表格内容向下滚动之后，就看不见标题了，能否将标题做成像Excel一样的可以冻结窗格

全选没有被isContainChildren控制

Originally posted by @JesseWeb in #18 (comment)

能否在type为checkbox的column中,加上一个标识[isContainChildren]用于控制是否勾选子节点

需求场景： 父节点 第一列显示地址
子节点第一列显示订单号
custom_field字段无法支持 此功能

目前我是通过formatter 里面去判断进行修改的

可否在custom_field里面增加这些配置项？？？

sort有值，但是排序没起作用

控制台报错“strict 模式下不允许一个属性有多个定义”

是完完全全按照需求引入组件的，但是拖拽到其他组并没有生效，打印onTreeDataChange方法的参数，发现该方法没有生效。所用版本是1.2.5

你好，是否可增加列宽可拖拉调整

我点击每一行的编辑按钮， 如何实现实时编辑呢

如题

formatter: item => {
              return `<i-table></i-table>`
            }

像这样的，我每行想要渲染自定义的或者ele，iview的组件，请问该怎么做呢