xuliangzhan / vue-element-extends

🌴 基于 ElementUI 2.x 的扩展组件(已废弃 Have been abandoned)
MIT License
493 stars 166 forks source link

请将问题描述清楚、并提供相关报错信息,否则可能不会及时帮你解决!!! #127

Closed SundayCoding closed 5 years ago

SundayCoding commented 5 years ago

问题描述 Describe the bug 树形表格 因为项目原因,不想一行一行编辑,希望点击编辑,所以 :edit-config="{trigger: 'click', mode: 'cell'}" 树形表格单击编辑,顶级行编辑Ok,次级行编辑报错,git下来 ,源码同样报错, 报错位置:$refs.elxEditable.updateStatus(scope),中_getColumnByRowIndex方法 看源码后,猜测可能是因为树形结构数据找不到rowIndex,此问题也仅在树形表格单击绑定数据中发现 虽然数据更新了,但是看着一片一片红,真心难受,

报错信息或截图 Error message or screenshots vue.runtime.esm.js?6e6d:619 [Vue warn]: Error in v-on handler (Promise/async): "TypeError: Cannot read property 'querySelector' of undefined"

found in

---> at packages/input/src/input.vue

at packages/table/src/table.vue at packages/editable/src/editable.vue at examples/views/editable/Manual6.vue at examples/App.vue **请填写以下版本信息 please complete the following information** - vue: 2.6.10 - element-ui: 2.9.1 - vue-element-extends: 1.2.20
xuliangzhan commented 5 years ago

树只能支持小部分功能,不知道你的是什么场景,基础的编辑是可以支持的

SundayCoding commented 5 years ago

树的children行 cell 模式,编辑时调用updateStatus 方法, 方法: const { row, cell } = this._getColumnByRowIndex(record, column.property) 在此方法中 const cell = trElem.querySelector(.${column.id}) 出错, 因为树结构数据无法返回正确的row, 所以会导致节点选择报错,但最终值还是修改成功, 源码位置:editbale.vue =>updateStatus=>_getColumnByRowIndex=>trElem.querySelector 重现:树形表格 只需要修改 :edit-config="{trigger: 'click', mode: 'cell',} 然后编辑childen行数据 即可重现 在此非常感谢你的组件,因为项目中有大量表格编辑,你的组件对我大有帮助,非常感谢,同时也希望你的组件越做越好,有越来越多的人使用。

xuliangzhan commented 5 years ago

这个就是 https://xuliangzhan.github.io/vue-element-extends/#/editable/dblclick7,没发现增删改查会报错

SundayCoding commented 5 years ago

确实没有问题,可能是我配置错误,我再查查, 我使用的是https://xuliangzhan.github.io/vue-element-extends/#/editable/manual6 然后修改 :edit-config="{trigger: 'click', mode: 'cell'}" 然后在编辑children 时 报的错,以上是我再源码中修改出现的问题 image image

SundayCoding commented 5 years ago

在https://xuliangzhan.github.io/vue-element-extends/#/editable/dblclick7 中 我同样修改

image 也出现此问题 image

xuliangzhan commented 5 years ago

你重新拉取源码再 demo 跑下,我没发现有报这个错

SundayCoding commented 5 years ago

😂 image 没事的,我这边重写了你的方法,临时解决的这个问题 image

xuliangzhan commented 5 years ago

看你是用了 element 的 treeProps:{} ?这个目前不兼容哈,目前只兼容 :edit-config="{prop:{}}"

SundayCoding commented 5 years ago

我这边 是在源码基础上改的 image 而且发现右键菜单也出现问题了😂,经常失效 image

xuliangzhan commented 5 years ago

树除了基础的增删改查,其他可能会存在问题的,这个结构不一样,这个涉及内部数据很多情况是不好处理的 哈

SundayCoding commented 5 years ago

是的,我发现你的代码中很多地方都是直接取TableData 数据 ,如果是TreeData 就可能会出问题, image 不管怎样哈,都非常感谢你开发这么优秀的组件👍😊

xuliangzhan commented 5 years ago

这种树的 vxe-table 才能支持所有功能,基于 element 二次封装的这个目前是支持不了 很多限制的 哈

ggzzddd commented 5 years ago

是的,我发现你的代码中很多地方都是直接取TableData 数据 ,如果是TreeData 就可能会出问题, image 不管怎样哈,都非常感谢你开发这么优秀的组件

你重新拉取源码再 demo 跑下,我没发现有报这个错

从master拉去代码

yarn
npm run serve

image