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