Commit 9c32f558 authored by hetech's avatar hetech Committed by GitHub

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

parent f33a6562
...@@ -1521,7 +1521,7 @@ Customize table column so it can be integrated with other components. ...@@ -1521,7 +1521,7 @@ Customize table column so it can be integrated with other components.
### Table with custom header ### Table with custom header
Customize table header so it can be even more customized. 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 ```html
<template> <template>
<el-table <el-table
...@@ -1537,7 +1537,7 @@ Customize table header so it can be even more customized. ...@@ -1537,7 +1537,7 @@ Customize table header so it can be even more customized.
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="right"> align="right">
<template slot="header" slot-scope="slot"> <template slot="header" slot-scope="scope">
<el-input <el-input
v-model="search" v-model="search"
size="mini" size="mini"
...@@ -1581,8 +1581,12 @@ Customize table header so it can be even more customized. ...@@ -1581,8 +1581,12 @@ Customize table header so it can be even more customized.
} }
}, },
methods: { methods: {
handleEdit(){}, handleEdit(index, row) {
handleDelete(){} console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}, },
} }
</script> </script>
......
...@@ -1520,7 +1520,7 @@ Personalice la columna de la tabla para que pueda integrarse con otros component ...@@ -1520,7 +1520,7 @@ Personalice la columna de la tabla para que pueda integrarse con otros component
### Table with custom header ### Table with custom header
Customize table header so it can be even more customized. 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 ```html
<template> <template>
<el-table <el-table
...@@ -1536,7 +1536,7 @@ Customize table header so it can be even more customized. ...@@ -1536,7 +1536,7 @@ Customize table header so it can be even more customized.
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="right"> align="right">
<template slot="header" slot-scope="slot"> <template slot="header" slot-scope="scope">
<el-input <el-input
v-model="search" v-model="search"
size="mini" size="mini"
...@@ -1580,8 +1580,12 @@ Customize table header so it can be even more customized. ...@@ -1580,8 +1580,12 @@ Customize table header so it can be even more customized.
} }
}, },
methods: { methods: {
handleEdit(){}, handleEdit(index, row) {
handleDelete(){} console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}, },
} }
</script> </script>
......
...@@ -1686,11 +1686,11 @@ ...@@ -1686,11 +1686,11 @@
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="right"> align="right">
<template slot="header" slot-scope="slot"> <template slot="header" slot-scope="scope">
<el-input <el-input
v-model="search" v-model="search"
size="mini" size="mini"
placeholder="Type to search"/> placeholder="输入关键字搜索"/>
</template> </template>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
...@@ -1730,8 +1730,12 @@ ...@@ -1730,8 +1730,12 @@
} }
}, },
methods: { methods: {
handleEdit(){}, handleEdit(index, row) {
handleDelete(){} console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}, },
} }
</script> </script>
......
...@@ -453,7 +453,7 @@ export default { ...@@ -453,7 +453,7 @@ export default {
if (this.type === 'selection') { if (this.type === 'selection') {
console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set scoped-slot header.'); console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set scoped-slot header.');
} else { } else {
this.columnConfig.renderHeader = this.$scopedSlots.header; this.columnConfig.renderHeader = (h, scope) => this.$scopedSlots.header(scope);
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment