Skip to content

Table: Adds header rendering slot #13012

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 26, 2018
Merged

Table: Adds header rendering slot #13012

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f70b08e
Table: Adds header rendering slot
ivanseidel Oct 10, 2018
8234954
Add translation to spanish
ivanseidel Oct 17, 2018
925cacd
Include render-header deprecation warning
ivanseidel Oct 17, 2018
991ef98
Add chinese translation and scoped slot description at bottom
ivanseidel Oct 20, 2018
591b8c0
Fix documentation and warnings. Fix custom-header docs
ivanseidel Oct 24, 2018
c8bf9e5
Fix redundant columns and cleanup example
ivanseidel Oct 24, 2018
022fce1
Prevent scopedSlot from working on selection column
ivanseidel Oct 24, 2018
9bd516a
Typo
ivanseidel Oct 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 76 additions & 1 deletion examples/docs/en-US/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,8 @@
amount3: 15
}],
currentRow: null,
multipleSelection: []
multipleSelection: [],
search: '',
};
},

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -2051,3 +2125,4 @@ You can customize row index in `type=index` columns.
| Name | Description |
|------|--------|
| — | Custom content for table columns. The scope parameter is { row, column, $index } |
| header | Custom content for table header. The scope parameter is { column, $index } |
77 changes: 76 additions & 1 deletion examples/docs/es/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,8 @@
amount3: 15
}],
currentRow: null,
multipleSelection: []
multipleSelection: [],
search: '',
};
},

Expand Down Expand Up @@ -1499,6 +1500,79 @@ 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="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>
```
:::

### 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.
Expand Down Expand Up @@ -2054,3 +2128,4 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| Name | Description |
|------|--------|
| — | Custom content for table columns. The scope parameter is { row, column, $index } |
| header | Custom content for table header. The scope parameter is { column, $index } |
77 changes: 76 additions & 1 deletion examples/docs/zh-CN/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,8 @@
amount3: 15
}],
currentRow: null,
multipleSelection: []
multipleSelection: [],
search: '',
};
},

Expand Down Expand Up @@ -1648,6 +1649,79 @@
```
:::

### 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>
```
:::

### 表尾合计行

若表格展示的是各类数字，可以在表尾显示各列的合计。
Expand Down Expand Up @@ -2111,3 +2185,4 @@
| name | 说明 |
|------|--------|
| — | 自定义列的内容，参数为 { row, column, $index } |
| header | Custom content for table header. The scope parameter is { column, $index } |
9 changes: 9 additions & 0 deletions packages/table/src/table-column.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,11 @@ export default {
}
});

// Deprecation warning for renderHeader property
if (this.renderHeader) {
console.warn('[Element Warn][Table Column]\'render-header\' property will be deprecated in next major version. please use scoped-slot \'header\' instead.');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I find render-header is widely used. Maybe we can't deprecate this attribute in next major version. We should give users enough time to upgrade.
A potential warning info is like this:

Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.

}

this.columnConfig = column;

let renderCell = column.renderCell;
Expand Down Expand Up @@ -444,6 +449,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);
}
};