手写组件递归实现树状表格

vue实现树状表格

功能：大部分的ui框架（element ui、view ui等）都有树状表格，但有时候现有的框架样式并不能满足产品的需求，因此我们就需要手写树状表格。
要点：利用vue手写树状表格，主要有2个要点，一是利用组件的递归，实现层级的展示；二是利用js的递归，实现折叠父元素，从而自动折叠所有层级的子元素
代码实现：
1.html实现
1.1 App.vue

数据结构：

1.2 TableTree.vue

2.js实现
2.1 App.vue

    // 使用js递归，实现折叠父元素，从而自动折叠子元素
    handleChildShow(arr) {
      for (let item of arr) {
        if (item.isShow) {
          item.isShow = false;
          if(item.children){
            this.handleChildShow(item.children)
          }
        }
      }
    },
    // 作用：实现图标的改变和内容的展示与折叠
    handleShow(isShow, id) {
      for (let obj of this.tableData) {
        if (obj.id == id) {
          // 通过isShow来控制图标和内容的展示
          obj.isShow = !isShow;
          if (obj.children) {
            this.handleChildShow(obj.children)
          }
        }
      }
    }
  }

2.2 TableTree.vue

 // 使用js递归，实现折叠父元素，从而自动折叠子元素
    handleChildShow(arr) {
      for (let item of arr) {
        if (item.isShow) {
          item.isShow = false;
          if (item.children) {
            this.handleChildShow(item.children);
          }
        }
      }
    },
    // 作用：实现图标的改变和内容的展示与折叠
    handleShow(isShow, id) {
      for (let obj of this.treeData) {
        if (obj.id == id) {
          // 通过isShow来控制图标和内容的展示
          obj.isShow = !isShow;
          if (obj.children) {
            this.handleChildShow(obj.children);
          }
        }
      }
    }

3.css实现
3.1 App.vue

#app {
  width: 600px;
  margin: 100px auto;
}
/* 给父元素单独添加样式 */
.row-main {
  display: flex;
  justify-content: space-between;
  background: #eee;
  padding: 10px 0 10px 10px;
  border-radius: 20px;
  color: #f00;
  margin-bottom: 10px;
}
.row-main > div {
  text-align: center;
}
.province {
  display: flex;
  align-items: center;
}
img {
  width: 20px;
  height: 20px;
  margin-left: 6px;
}

3.2 TableTree.vue

ul,
li {
  list-style: none;
  padding: 0;
}
li > div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
li {
  padding-left: 10px;
}