Table: expand row feature only supports scoped slot.

pull/2045/head
qingwei.li 2016-12-28 18:11:25 +08:00
parent 7f35ee1423
commit 4817e116e5
6 changed files with 26 additions and 33 deletions

View File

@ -1349,19 +1349,19 @@ Customize table column so it can be integrated with other components.
### 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.
:::demo Activate expandable row by adding type="expand" and `inline-template` attributeThe template for `el-table-column` will be rendered as the contents of the expanded row, you can access the same attributes as the` inline-template`。
:::demo Activate expandable row by adding type="expand" and `Scoped slot`, The template for `el-table-column` will be rendered as the contents of the expanded row, you can access the same attributes as the` Scoped slot`.
```html
<template>
<el-table
:data="tableData3"
style="width: 100%">
<el-table-column type="expand" inline-template>
<div>
<p>State: {{ row.state }}</p>
<p>City: {{ row.city }}</p>
<p>Address: {{ row.address }}</p>
<p>Zip: {{ row.zip }}</p>
</div>
<el-table-column type="expand">
<template scope="props">
<p>State: {{ props.row.state }}</p>
<p>City: {{ props.row.city }}</p>
<p>Address: {{ props.row.address }}</p>
<p>Zip: {{ props.row.zip }}</p>
</template>
</el-table-column>
<el-table-column
label="Date"

View File

@ -1363,19 +1363,19 @@
### 展开行
当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。
:::demo 通过设置 type="expand" 和 `inline-template` 属性可以开启展开行功能,`el-table-column` 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用 `inline-template` 的时候相同。
:::demo 通过设置 type="expand" 和 `Scoped slot` 可以开启展开行功能,`el-table-column` 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用 `Scoped slot` 的时候相同。
```html
<template>
<el-table
:data="tableData3"
style="width: 100%">
<el-table-column type="expand" inline-template>
<div>
<p>省: {{ row.province }}</p>
<p>市: {{ row.city }}</p>
<p>住址: {{ row.detailAddress }}</p>
<p>邮编: {{ row.zip }}</p>
</div>
<el-table-column type="expand">
<template scope="props">
<p>省: {{ props.row.province }}</p>
<p>市: {{ props.row.city }}</p>
<p>住址: {{ props.row.detailAddress }}</p>
<p>邮编: {{ props.row.zip }}</p>
</template>
</el-table-column>
<el-table-column
label="日期"

View File

@ -24,7 +24,7 @@
"lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh",
"pub:all": "npm run dist:all && lerna publish",
"test": "npm run lint && CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
"test": "npm run lint && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
"test:watch": "karma start test/unit/karma.conf.js"
},
"repository": {

View File

@ -66,7 +66,7 @@ export default {
this.store.states.expandRows.indexOf(row) > -1
? (<tr>
<td colspan={ this.columns.length } class="el-table__expanded-cell">
{ this.$parent.renderExpanded ? this.$parent.renderExpanded.call(this._renderProxy, h, { row, $index, store: this.store, _self: this.$parent.$vnode.context }) : ''}
{ this.table.renderExpanded ? this.table.renderExpanded(h, { row, $index, store: this.store }) : ''}
</td>
</tr>)
: ''

View File

@ -247,19 +247,9 @@ export default {
if (type === 'expand') {
owner.renderExpanded = function(h, data) {
if (_self.$vnode.data.inlineTemplate) {
data._self = _self.context || data._self;
if (Object.prototype.toString.call(data._self) === '[object Object]') {
for (let prop in data._self) {
if (!data.hasOwnProperty(prop)) {
data[prop] = data._self[prop];
}
}
}
data._staticTrees = _self._staticTrees;
data.$options.staticRenderFns = _self.$options.staticRenderFns;
return _self.customRender.call(data);
}
return _self.$scopedSlots.default
? _self.$scopedSlots.default(data)
: _self.$slots.default;
};
column.renderCell = function(h, data) {
@ -270,6 +260,7 @@ export default {
}
column.renderCell = function(h, data) {
// 未来版本移除
if (_self.$vnode.data.inlineTemplate) {
renderCell = function() {
data._self = _self.context || data._self;

View File

@ -965,8 +965,10 @@ describe('Table', () => {
return createVue({
template: `
<el-table row-key="id" :data="testData" @expand="handleExpand" ${extra}>
<el-table-column type="expand" inline-template>
<div>{{row.name}}</div>
<el-table-column type="expand">
<template scope="props">
<div>{{props.row.name}}</div>
</template>
</el-table-column>
<el-table-column prop="release" label="release" />
<el-table-column prop="director" label="director" />