Table: Add treeChildrenProp Attribute

ElemeFE · Apr 3, 2019 · 5b127ad · 5b127ad
1 parent 0cbb226
commit 5b127ad
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md
@@ -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="日期"
@@ -1349,7 +1351,7 @@
           date: '2016-05-01',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1519 弄',
-          children: [{
+          customChildren: [{
               id: 31,
               date: '2016-05-01',
               name: '王小虎',
@@ -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 }) | — | — |
@@ -1954,4 +1957,4 @@
 | name | 说明 |
 |------|--------|
 | — | 自定义列的内容，参数为 { row, column, $index } |
-| header | 自定义表头的内容. 参数为 { column, $index } |
+| header | 自定义表头的内容. 参数为 { column, $index } |
diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
@@ -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);
         }
       });
     };
@@ -333,6 +334,11 @@
         default: true
       },
 
+      treeChildrenProp: {
+        type: String,
+        default: 'children'
+      },
+
       indent: {
         type: Number,
         default: 16
@@ -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 = {
@@ -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;
@@ -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(() => {