Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table: Add treeChildrenProp Attribute #14947

Closed
wants to merge 1 commit into from
Closed

Table: Add treeChildrenProp Attribute #14947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 10 additions & 7 deletions examples/docs/zh-CN/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1282,11 +1282,13 @@
```html
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
border
row-key="id">
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
border
row-key="id"
tree-children-prop="customChildren"
>
<el-table-column
prop="date"
label="日期"
Expand Down Expand Up @@ -1349,7 +1351,7 @@
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
customChildren: [{
id: 31,
date: '2016-05-01',
name: '王小虎',
Expand Down Expand Up @@ -1876,6 +1878,7 @@
| summary-method | 自定义的合计计算方法 | Function({ columns, data }) | — | — |
| span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | — |
| select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | Boolean | — | true |
| tree-children-prop | 获得树形数据的子节点数据的属性名 | String | — | children |
| indent | 展示树形数据时，树节点的缩进 | Number | — | 16 |
| lazy | 是否懒加载子节点数据 | Boolean | — | — |
| load | 加载子节点数据的函数，lazy 为 true 时生效 | Function({ row, treeNode, resolve }) | — | — |
Expand Down Expand Up @@ -1954,4 +1957,4 @@
| name | 说明 |
|------|--------|
| — | 自定义列的内容，参数为 { row, column, $index } |
| header | 自定义表头的内容. 参数为 { column, $index } |
| header | 自定义表头的内容. 参数为 { column, $index } |
24 changes: 16 additions & 8 deletions packages/table/src/table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,14 +226,15 @@
import TableFooter from './table-footer';
import { getRowIdentity } from './util';

const flattenData = function(data) {
const flattenData = function(data, treeChildrenProp) {
if (!data) return data;
let newData = [];
const flatten = arr => {
arr.forEach((item) => {
newData.push(item);
if (Array.isArray(item.children)) {
flatten(item.children);
const children = item[treeChildrenProp];
if (Array.isArray(children)) {
flatten(children);
}
});
};
Expand Down Expand Up @@ -333,6 +334,11 @@
default: true
},

treeChildrenProp: {
type: String,
default: 'children'
},

indent: {
type: Number,
default: 16
Expand Down Expand Up @@ -500,16 +506,18 @@
level
};
parentData.children.push(rowKey);
if (Array.isArray(item.children) && item.children.length) {
const children = item[this.treeChildrenProp];
if (Array.isArray(children) && children.length) {
treeData[rowKey].children = [];
treeData[rowKey].expanded = false;
traverse(item.children, treeData[rowKey], level + 1);
traverse(children, treeData[rowKey], level + 1);
}
});
};
if (data) {
data.forEach(item => {
const containChildren = Array.isArray(item.children) && item.children.length;
const children = item[this.treeChildrenProp];
const containChildren = Array.isArray(children) && children.length;
if (!(containChildren || item.hasChildren)) return;
const rowKey = this.getRowKey(item);
const treeNode = {
Expand All @@ -520,7 +528,7 @@
};
if (containChildren) {
treeData[rowKey] = treeNode;
traverse(item.children, treeData[rowKey], 1);
traverse(children, treeData[rowKey], 1);
} else if (item.hasChildren && this.lazy) {
treeNode.hasChildren = true;
treeNode.loaded = false;
Expand Down Expand Up @@ -661,7 +669,7 @@
immediate: true,
handler(value) {
this.store.states.treeData = this.getTableTreeData(value);
value = flattenData(value);
value = flattenData(value, this.treeChildrenProp);
this.store.commit('setData', value);
if (this.$ready) {
this.$nextTick(() => {
Expand Down