Browse Source

Table: fix header scoped slot not accessing data (#13263)

hetech 6 years ago
parent
commit
9c32f55892

+ 8 - 4
examples/docs/en-US/table.md

@@ -1521,7 +1521,7 @@ 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).
+:::demo You can customize how the header looks by header [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots).
 ```html
 <template>
   <el-table
@@ -1537,7 +1537,7 @@ Customize table header so it can be even more customized.
     </el-table-column>
     <el-table-column
       align="right">
-      <template slot="header" slot-scope="slot">
+      <template slot="header" slot-scope="scope">
         <el-input
           v-model="search"
           size="mini"
@@ -1581,8 +1581,12 @@ Customize table header so it can be even more customized.
       }
     },
     methods: {
-      handleEdit(){},
-      handleDelete(){}
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
     },
   }
 </script>

+ 8 - 4
examples/docs/es/table.md

@@ -1520,7 +1520,7 @@ Personalice la columna de la tabla para que pueda integrarse con otros component
 ### 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).
+:::demo You can customize how the header looks by header [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots).
 ```html
 <template>
   <el-table
@@ -1536,7 +1536,7 @@ Customize table header so it can be even more customized.
     </el-table-column>
     <el-table-column
       align="right">
-      <template slot="header" slot-scope="slot">
+      <template slot="header" slot-scope="scope">
         <el-input
           v-model="search"
           size="mini"
@@ -1580,8 +1580,12 @@ Customize table header so it can be even more customized.
       }
     },
     methods: {
-      handleEdit(){},
-      handleDelete(){}
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
     },
   }
 </script>

+ 8 - 4
examples/docs/zh-CN/table.md

@@ -1686,11 +1686,11 @@
     </el-table-column>
     <el-table-column
       align="right">
-      <template slot="header" slot-scope="slot">
+      <template slot="header" slot-scope="scope">
         <el-input
           v-model="search"
           size="mini"
-          placeholder="Type to search"/>
+          placeholder="输入关键字搜索"/>
       </template>
       <template slot-scope="scope">
         <el-button
@@ -1730,8 +1730,12 @@
       }
     },
     methods: {
-      handleEdit(){},
-      handleDelete(){}
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
     },
   }
 </script>

+ 1 - 1
packages/table/src/table-column.js

@@ -453,7 +453,7 @@ export default {
       if (this.type === 'selection') {
         console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set scoped-slot header.');
       } else {
-        this.columnConfig.renderHeader = this.$scopedSlots.header;
+        this.columnConfig.renderHeader = (h, scope) => this.$scopedSlots.header(scope);
       }
     }