Table: Adds header rendering slot

Fixes ElemeFE#4909 and ElemeFE#4908
TendaDigital · Oct 10, 2018 · f70b08e · f70b08e
1 parent 5beaa67
commit f70b08e
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 1 deletion.
diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md
@@ -186,7 +186,8 @@
           amount3: 15
         }],
         currentRow: null,
-        multipleSelection: []
+        multipleSelection: [],
+        search: '',
       };
     },
 
@@ -1500,6 +1501,79 @@ Customize table column so it can be integrated with other components.
 ```
 :::
 
+### Table with custom header
+
+Customize table header so it can be even more customized.
+:::demo You can customize how the header looks by [Default slot content](https://vuejs.org/v2/guide/components-slots.html#Default-Slot-Content).
+```html
+<template>
+  <el-table
+    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+    style="width: 100%">
+    <el-table-column
+      label="Date"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="Name"
+      prop="name">
+    </el-table-column>
+    <el-table-column
+      v-for="header in extraColumns"
+      :key="header"
+      :label="header"
+      prop="name">
+    </el-table-column>
+    <el-table-column
+      label="Name"
+      align="right">
+      <template slot="header" slot-scope="slot">
+        <el-input
+          v-model="search"
+          size="mini"
+          placeholder="Type to search"/>
+      </template>
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    },
+  }
+</script>
+```
+:::
+
 ### Expandable row
 
 When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.

diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js
@@ -444,6 +444,10 @@ export default {
       columnIndex = [].indexOf.call(parent.$el.children, this.$el);
     }
 
+    if (this.$scopedSlots.header) {
+      this.columnConfig.renderHeader = this.$scopedSlots.header;
+    }
+
     owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
   }
 };