github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

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
pull/13177/head
Ivan Seidel 2018-10-26 00:16:56 -03:00 committed by hetech
parent 31d31d904d
commit 2bafed0acc
4 changed files with 286 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
examples/docs/en-US/table.md
View File

@ -185,8 +185,26 @@
amount2: '4.1',
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,
multipleSelection: []
multipleSelection: [],
search: '',
};
},
@ -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
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.
| 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 } |

92
examples/docs/es/table.md
View File

@ -185,8 +185,26 @@
amount2: '4.1',
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,
multipleSelection: []
multipleSelection: [],
search: '',
};
},
@ -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
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
| 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 } |

92
examples/docs/zh-CN/table.md
View File

@ -225,8 +225,26 @@
amount2: '4.1',
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,
multipleSelection: []
multipleSelection: [],
search: '',
};
},
@ -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 @@
| name | 说明 |
|------|--------|
| — | 自定义列的内容，参数为 { row, column, $index } |
| header | Custom content for table header. The scope parameter is { column, $index } |

13
packages/table/src/table-column.js
View File

@ -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;
let renderCell = column.renderCell;
@ -444,6 +449,14 @@ export default {
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);
}
};