浅谈树形表格实现

当大家遇到这种树形表格的时候会怎么去实现,如果用element UI库的话就会很自然地想到使用span-method方法去合并单元格。通常情况下我也是这么做的,但是这次的需求还要满足可以在行内编辑,并且因为这种数据结构在我们系统上很常见也抽出来做了个公共组件。

首先我们该思考树形结构有什么特征,树形结构很明显的就是每个节点处理的业务逻辑和表现形式类似。顺其而然就想到递归引用“节点组件”组成树表格(bushi,是被大佬点醒才get到这个神操作)。

接下来我们思考每个节点组件我们应该做什么?因为由外部传进来包含了列所需信息的keys数组动态显示列。实现细节在此就不赘述。

除了递归组件之外我还想分享的就是关于递归组件的校验,从0实现一个表单校验太难了,所以我使用了el-form来协调着实现,在树形表格每一行root节点用el-form包裹,但是会出现一个问题就是el-form只能校验直接子组件的el-form-item,在这我通过在root根组件中触发校验时使用$refs.children来遍历调用下一层级组件的validate以实现递归组件的表单校验

写得不好请多多包涵~

猜你喜欢

转载自juejin.im/post/7110764697208487966