前言
看了一些文章,发现有许多都是复制粘贴,描述也不精准;在这里做一些记录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;
}