Skip to content

E
Element
Commit 2bafed0a authored by Ivan Seidel's avatar Ivan Seidel Committed by hetech
Browse files
Options

Table: Adds header rendering slot (#13012) 

* Table: Adds header rendering slot

Fixes #4909 and #4908

* Add translation to spanish

* Include render-header deprecation warning

* Add chinese translation and scoped slot description at bottom

* Fix documentation and warnings. Fix custom-header docs

* Fix redundant columns and cleanup example

* Prevent scopedSlot from working on selection column

* Typo
parent 31d31d90
Hide whitespace changes
Inline Side-by-side
Showing with 286 additions and 3 deletions
examples/docs/en-US/table.md
View file @ 2bafed0a
...@@ -185,8 +185,26 @@ ...@@ -185,8 +185,26 @@
amount2: '4.1', amount2: '4.1',
amount3: 15 amount3: 15
}], }],
tableData7: [{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-04',
name: 'John',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-01',
name: 'Morgan',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-03',
name: 'Jessy',
address: 'No. 189, Grove St, Los Angeles',
}],
currentRow: null, currentRow: null,
multipleSelection: [] multipleSelection: [],
search: '',
}; };
}, },
...@@ -1500,6 +1518,77 @@ Customize table column so it can be integrated with other components. ...@@ -1500,6 +1518,77 @@ 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="tableData7.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
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: 'John',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Morgan',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Jessy',
address: 'No. 189, Grove St, Los Angeles'
}],
search: '',
}
},
methods: {
handleEdit(){},
handleDelete(){}
},
}
</script>
```
:::
### Expandable row ### 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. 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.
...@@ -2051,3 +2140,4 @@ You can customize row index in `type=index` columns. ...@@ -2051,3 +2140,4 @@ You can customize row index in `type=index` columns.
| Name | Description | | Name | Description |
|------|--------| |------|--------|
| — | Custom content for table columns. The scope parameter is { row, column, $index } | | — | Custom content for table columns. The scope parameter is { row, column, $index } |
| header | Custom content for table header. The scope parameter is { column, $index } |
examples/docs/es/table.md
View file @ 2bafed0a
...@@ -185,8 +185,26 @@ ...@@ -185,8 +185,26 @@
amount2: '4.1', amount2: '4.1',
amount3: 15 amount3: 15
}], }],
tableData7: [{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-04',
name: 'John',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-01',
name: 'Morgan',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-03',
name: 'Jessy',
address: 'No. 189, Grove St, Los Angeles',
}],
currentRow: null, currentRow: null,
multipleSelection: [] multipleSelection: [],
search: '',
}; };
}, },
...@@ -1499,6 +1517,77 @@ Personalice la columna de la tabla para que pueda integrarse con otros component ...@@ -1499,6 +1517,77 @@ 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).
```html
<template>
<el-table
:data="tableData7.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
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-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-04',
name: 'John',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-01',
name: 'Morgan',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-03',
name: 'Jessy',
address: 'No. 189, Grove St, Los Angeles',
}],
search: ''
}
},
methods: {
handleEdit(){},
handleDelete(){}
},
}
</script>
```
:::
### Fila expandible ### Fila expandible
Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible. Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.
...@@ -2054,3 +2143,4 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co ...@@ -2054,3 +2143,4 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| Name | Description | | Name | Description |
|------|--------| |------|--------|
| — | Custom content for table columns. The scope parameter is { row, column, $index } | | — | Custom content for table columns. The scope parameter is { row, column, $index } |
| header | Custom content for table header. The scope parameter is { column, $index } |
\ No newline at end of file
examples/docs/zh-CN/table.md
View file @ 2bafed0a
...@@ -225,8 +225,26 @@ ...@@ -225,8 +225,26 @@
amount2: '4.1', amount2: '4.1',
amount3: 15 amount3: 15
}], }],
tableData7: [{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-04',
name: 'John',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-01',
name: 'Morgan',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-03',
name: 'Jessy',
address: 'No. 189, Grove St, Los Angeles',
}],
currentRow: null, currentRow: null,
multipleSelection: [] multipleSelection: [],
search: '',
}; };
}, },
...@@ -1648,6 +1666,77 @@ ...@@ -1648,6 +1666,77 @@
``` ```
::: :::
### 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="tableData7.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
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-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-04',
name: 'John',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-01',
name: 'Morgan',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-03',
name: 'Jessy',
address: 'No. 189, Grove St, Los Angeles',
}],
search: ''
}
},
methods: {
handleEdit(){},
handleDelete(){}
},
}
</script>
```
:::
### 表尾合计行 ### 表尾合计行
若表格展示的是各类数字，可以在表尾显示各列的合计。 若表格展示的是各类数字，可以在表尾显示各列的合计。
...@@ -2111,3 +2200,4 @@ ...@@ -2111,3 +2200,4 @@
| name | 说明 | | name | 说明 |
|------|--------| |------|--------|
| — | 自定义列的内容，参数为 { row, column, $index } | | — | 自定义列的内容，参数为 { row, column, $index } |
| header | Custom content for table header. The scope parameter is { column, $index } |
\ No newline at end of file
packages/table/src/table-column.js
View file @ 2bafed0a
...@@ -294,6 +294,11 @@ export default { ...@@ -294,6 +294,11 @@ export default {
} }
}); });
// Deprecation warning for renderHeader property
if (this.renderHeader) {
console.warn('[Element Warn][Table Column] Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
}
this.columnConfig = column; this.columnConfig = column;
let renderCell = column.renderCell; let renderCell = column.renderCell;
...@@ -444,6 +449,14 @@ export default { ...@@ -444,6 +449,14 @@ export default {
columnIndex = [].indexOf.call(parent.$el.children, this.$el); columnIndex = [].indexOf.call(parent.$el.children, this.$el);
} }
if (this.$scopedSlots.header) {
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;
}
}
owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null); owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
} }
}; };
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