Element实现table父子级表格展开（点击整行即展开、收回，不局限于点击“＞”符号）

前言

看了一些文章，发现有许多都是复制粘贴，描述也不精准；在这里做一些记录Element的table展开父子级数据，顺便实现通过行点击即可展开

实现顺序

首先，将后台返回的数据data封装成父子格式数据，如下图：

接着，vue页面上在el-table标签中添加属性，如下图：

当 row 中包含 children 字段时，被视为树形数据。渲染时必须要指定 row-key。
注①：row-key=""传入行数据的id（因为值必须唯一不重复）

②：@row-click是行点击事件，传入自定义名为getOpenDetails的方法。

	getOpenDetails(row) {
      //点击行展开
      this.$refs.table.toggleRowExpansion(row)
    }

在element官网中有表格方法toggleRowExpansion，可以传参。
看很多文章都写成“ table.toggleRowExpansion(row , true) "，会多一个传参数值true；虽然这样也可以点击行展开行，但是再次点击却不能合拢；所以我选择” table.toggleRowExpansion(row) "，既可切换行展开状态，根据个人实际业务场景使用。

③：:tree-props="{ children: ‘childs’, hasChildren: ’ ’ }"通过tree-props 配置指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。我这里只需要用属性children。

效果如下：

点击行的任意位置即收回

PS：如果要自定义” > “（第一列单元格左侧）的颜色，可以在css样式中添加这一句：

		.el-icon-arrow-right:before {
			color: white;
		}