vue+element实现树状表格

一、情景：  列表是一个树状表格，可以无限添加下级，以及对列表的某一行进行增删改查（目前查没有写）。

本篇是在原博主的代码基础上添加了部分功能。 功能1： 给树状表格添加虚线部分，可以更清楚树节点层级关系 功能2： 某行数据可以直接输入框编辑，也可以点击编辑按钮打开弹框编辑 功能3： 我这里树状节点一共有三种： –①顶级根节点first： 只会有最外层一个 默认就有的 可以添加下级【夹】、【页】节点 –②中间夹节点middle： 通过点击【夹】节点按钮添加来的，可以继续添加下级【夹】、【页】 –③末梢页节点last： 不会再有下级。只有它才有数据展示 –总结就是 中间的【夹】可以无限添加下级，【页】就是末梢节点不能添加下级。每行的数据有个字段farOrSon来判断是属于什么节点。然后展示对应的图标。

核心代码

    updateTableTree(pid, nodes) {
      //更新节点数据
      //pid为父级id,nodes为修改后的子集内容
      //以下面数据结构举例
      //pid=3  子集为id等于3的children数据
      this.$set(this.$refs.tableRefName.store.states.lazyTreeNodeMap,pid, nodes );
    },
    refTable() {
     /**
      *作用:更新树状节点
      * 因树状原因需更新外层
      *所以递归更新所有节点
      */
      let _this = this;
      function dg(data) {
        for (let i in data) {
          if (data[i].children) {
            _this.updateTableTree(data[i].id, data[i].children);
            dg(data[i].children);
          }
        }
      }
      dg(this.tableData);
    }

原文链接