mirror of https://github.com/ElemeFE/element
Table: add renderHeader prop. (#838)
FuryBean
cinwell.li
parent
a00aea7080
commit
f013d6eb0b
|
|
@ -15,7 +15,8 @@
|
|||
- 改善 tabs 现在支持动态更新
|
||||
- Table 新增 highlightCurrentRow 属性、新增 current-change 事件
|
||||
- TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用）
|
||||
- Pagination 新增 pageCount 属性
|
||||
- TableColumn 新增属性 render-header
|
||||
- Pagination 新增属性 pageCount
|
||||
|
||||
#### 非兼容性更新
|
||||
|
||||
|
|
|
|||
|
|
@ -924,15 +924,16 @@
|
|||
### Table-column Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
|
||||
| label | 显示的标题 | string | — | — |
|
||||
| prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
|
||||
| width | 对应列的宽度 | string | — | — |
|
||||
| min-width | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | — | — |
|
||||
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | - |
|
||||
| render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | - | - |
|
||||
| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
|
||||
| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效 | Function(a, b) | - | - |
|
||||
| resizable | 对应列是否可以通过拖动改变宽度（如果需要在 el-table 上设置 border 属性为真） | boolean | — | true |
|
||||
| type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
|
||||
| formatter | 用来格式化内容 | Function(row, column) | — | — |
|
||||
| show-overflow-tooltip | 当过长被隐藏时显示 tooltip | Boolean | — | false |
|
||||
| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 prop 属性。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), _self(当前上下文), store(table store) }` 的信息。 | — | — |
|
||||
|
|
|
|||
|
|
@ -235,7 +235,7 @@
|
|||
| props | 配置选项，具体看下表 | object | — | — |
|
||||
| load | 加载子树数据的方法 | function(node, resolve) | — | — |
|
||||
| show-checkbox | 节点是否可被选择 | boolean | — | false |
|
||||
| render-content | 树节点的内容区的渲染 Function，会传入两个参数，h 与 { node: node }。 | Function | - | - |
|
||||
| render-content | 树节点的内容区的渲染 Function | Function(h, { node } | - | - |
|
||||
| highlight-current | 是否高亮当前选中节点，默认值是 false。| boolean | - | false |
|
||||
|
||||
### props
|
||||
|
|
|
|||
|
|
@ -42,8 +42,8 @@ export default {
|
|||
on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
|
||||
on-mouseleave={ this.handleCellMouseLeave }>
|
||||
{
|
||||
column.template
|
||||
? column.template.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.$parent.$vnode.context })
|
||||
column.renderCell
|
||||
? column.renderCell.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.$parent.$vnode.context })
|
||||
: <div class="cell">{ this.getCellContent(row, column.property, column.id) }</div>
|
||||
}
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -24,26 +24,25 @@ const defaults = {
|
|||
|
||||
const forced = {
|
||||
selection: {
|
||||
headerTemplate: function(h) {
|
||||
renderHeader: function(h) {
|
||||
return <el-checkbox
|
||||
nativeOn-click={ this.toggleAllSelection }
|
||||
domProps-value={ this.isAllSelected } />;
|
||||
},
|
||||
template: function(h, { row, column, store, $index }) {
|
||||
renderCell: function(h, { row, column, store, $index }) {
|
||||
return <el-checkbox
|
||||
domProps-value={ store.isSelected(row) }
|
||||
disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
|
||||
on-input={ (value) => { store.commit('rowSelectedChanged', row); } } />;
|
||||
on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
|
||||
},
|
||||
sortable: false,
|
||||
resizable: false
|
||||
},
|
||||
index: {
|
||||
// headerTemplate: function(h) { return <div>#</div>; },
|
||||
headerTemplate: function(h, label) {
|
||||
return label || '#';
|
||||
renderHeader: function(h, { column }) {
|
||||
return column.label || '#';
|
||||
},
|
||||
template: function(h, { $index }) {
|
||||
renderCell: function(h, { $index }) {
|
||||
return <div>{ $index + 1 }</div>;
|
||||
},
|
||||
sortable: false
|
||||
|
|
@ -73,6 +72,10 @@ const getDefaultColumn = function(type, options) {
|
|||
return column;
|
||||
};
|
||||
|
||||
const DEFAULT_RENDER_CELL = function(h, { row, column }, parent) {
|
||||
return <span>{ parent.getCellContent(row, column.property, column.id) }</span>;
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'el-table-column',
|
||||
|
||||
|
|
@ -86,7 +89,7 @@ export default {
|
|||
prop: String,
|
||||
width: {},
|
||||
minWidth: {},
|
||||
template: String,
|
||||
renderHeader: Function,
|
||||
sortable: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
|
|
@ -170,21 +173,14 @@ export default {
|
|||
}
|
||||
|
||||
let isColumnGroup = false;
|
||||
let template;
|
||||
|
||||
let property = this.prop || this.property;
|
||||
if (property) {
|
||||
template = function(h, { row }, parent) {
|
||||
return <span>{ parent.getCellContent(row, property, columnId) }</span>;
|
||||
};
|
||||
}
|
||||
|
||||
let column = getDefaultColumn(type, {
|
||||
id: columnId,
|
||||
label: this.label,
|
||||
property,
|
||||
property: this.prop || this.property,
|
||||
type,
|
||||
template,
|
||||
renderCell: DEFAULT_RENDER_CELL,
|
||||
renderHeader: this.renderHeader,
|
||||
minWidth,
|
||||
width,
|
||||
isColumnGroup,
|
||||
|
|
@ -207,12 +203,12 @@ export default {
|
|||
|
||||
objectAssign(column, forced[type] || {});
|
||||
|
||||
let renderColumn = column.template;
|
||||
let renderCell = column.renderCell;
|
||||
let _self = this;
|
||||
|
||||
column.template = function(h, data) {
|
||||
column.renderCell = function(h, data) {
|
||||
if (_self.$vnode.data.inlineTemplate) {
|
||||
renderColumn = function() {
|
||||
renderCell = function() {
|
||||
data._staticTrees = _self._staticTrees;
|
||||
data.$options = {};
|
||||
data.$options.staticRenderFns = _self.$options.staticRenderFns;
|
||||
|
|
@ -228,10 +224,10 @@ export default {
|
|||
effect={ this.effect }
|
||||
placement="top"
|
||||
disabled={ this.tooltipDisabled }>
|
||||
<div class="cell">{ renderColumn(h, data, this._renderProxy) }</div>
|
||||
<span slot="content">{ renderColumn(h, data, this._renderProxy) }</span>
|
||||
<div class="cell">{ renderCell(h, data, this._renderProxy) }</div>
|
||||
<span slot="content">{ renderCell(h, data, this._renderProxy) }</span>
|
||||
</el-tooltip>
|
||||
: <div class="cell">{ renderColumn(h, data, this._renderProxy) }</div>;
|
||||
: <div class="cell">{ renderCell(h, data, this._renderProxy) }</div>;
|
||||
};
|
||||
|
||||
this.columnConfig = column;
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ export default {
|
|||
class={ [column.id, column.order, column.align, this.isCellHidden(cellIndex) ? 'is-hidden' : ''] }>
|
||||
<div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : ''] }>
|
||||
{
|
||||
column.headerTemplate
|
||||
? column.headerTemplate.call(this._renderProxy, h, column.label)
|
||||
column.renderHeader
|
||||
? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })
|
||||
: column.label
|
||||
}
|
||||
{
|
||||
|
|
|
|||
|
|
@ -526,6 +526,37 @@ describe('Table', () => {
|
|||
}, DELAY);
|
||||
});
|
||||
|
||||
it('render-header', done => {
|
||||
const vm = createVue({
|
||||
template: `
|
||||
<el-table :data="testData">
|
||||
<el-table-column prop="name" :render-header="renderHeader" label="name">
|
||||
</el-table-column>
|
||||
<el-table-column prop="release"/>
|
||||
<el-table-column prop="director"/>
|
||||
<el-table-column prop="runtime"/>
|
||||
</el-table>
|
||||
`,
|
||||
|
||||
methods: {
|
||||
renderHeader(h, { column, $index }) {
|
||||
return '' + $index + ':' + column.label;
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.testData = getTestData();
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(_ => {
|
||||
const headerCell = vm.$el.querySelector('.el-table__header-wrapper thead tr th:first-child .cell');
|
||||
expect(headerCell.textContent).to.equal('0:name');
|
||||
destroyVM(vm);
|
||||
done();
|
||||
}, DELAY);
|
||||
});
|
||||
|
||||
it('align', done => {
|
||||
const vm = createTable('align="left"', 'align="right"', 'align="center"');
|
||||
setTimeout(_ => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue