Commit 4817e116 authored by qingwei.li's avatar qingwei.li

Table: expand row feature only supports scoped slot.

parent 7f35ee14
...@@ -1349,19 +1349,19 @@ Customize table column so it can be integrated with other components. ...@@ -1349,19 +1349,19 @@ Customize table column so it can be integrated with other components.
### Expandable row ### 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. 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` attribute,The 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 ```html
<template> <template>
<el-table <el-table
:data="tableData3" :data="tableData3"
style="width: 100%"> style="width: 100%">
<el-table-column type="expand" inline-template> <el-table-column type="expand">
<div> <template scope="props">
<p>State: {{ row.state }}</p> <p>State: {{ props.row.state }}</p>
<p>City: {{ row.city }}</p> <p>City: {{ props.row.city }}</p>
<p>Address: {{ row.address }}</p> <p>Address: {{ props.row.address }}</p>
<p>Zip: {{ row.zip }}</p> <p>Zip: {{ props.row.zip }}</p>
</div> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="Date" label="Date"
......
...@@ -1363,19 +1363,19 @@ ...@@ -1363,19 +1363,19 @@
### 展开行 ### 展开行
当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。 当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。
:::demo 通过设置 type="expand" 和 `inline-template` 属性可以开启展开行功能,`el-table-column` 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用 `inline-template` 的时候相同。 :::demo 通过设置 type="expand" 和 `Scoped slot` 可以开启展开行功能,`el-table-column` 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用 `Scoped slot` 的时候相同。
```html ```html
<template> <template>
<el-table <el-table
:data="tableData3" :data="tableData3"
style="width: 100%"> style="width: 100%">
<el-table-column type="expand" inline-template> <el-table-column type="expand">
<div> <template scope="props">
<p>省: {{ row.province }}</p> <p>省: {{ props.row.province }}</p>
<p>市: {{ row.city }}</p> <p>市: {{ props.row.city }}</p>
<p>住址: {{ row.detailAddress }}</p> <p>住址: {{ props.row.detailAddress }}</p>
<p>邮编: {{ row.zip }}</p> <p>邮编: {{ props.row.zip }}</p>
</div> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="日期" label="日期"
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
"lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet", "lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh", "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh",
"pub:all": "npm run dist:all && lerna publish", "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" "test:watch": "karma start test/unit/karma.conf.js"
}, },
"repository": { "repository": {
......
...@@ -66,7 +66,7 @@ export default { ...@@ -66,7 +66,7 @@ export default {
this.store.states.expandRows.indexOf(row) > -1 this.store.states.expandRows.indexOf(row) > -1
? (<tr> ? (<tr>
<td colspan={ this.columns.length } class="el-table__expanded-cell"> <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> </td>
</tr>) </tr>)
: '' : ''
......
...@@ -247,19 +247,9 @@ export default { ...@@ -247,19 +247,9 @@ export default {
if (type === 'expand') { if (type === 'expand') {
owner.renderExpanded = function(h, data) { owner.renderExpanded = function(h, data) {
if (_self.$vnode.data.inlineTemplate) { return _self.$scopedSlots.default
data._self = _self.context || data._self; ? _self.$scopedSlots.default(data)
if (Object.prototype.toString.call(data._self) === '[object Object]') { : _self.$slots.default;
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);
}
}; };
column.renderCell = function(h, data) { column.renderCell = function(h, data) {
...@@ -270,6 +260,7 @@ export default { ...@@ -270,6 +260,7 @@ export default {
} }
column.renderCell = function(h, data) { column.renderCell = function(h, data) {
// 未来版本移除
if (_self.$vnode.data.inlineTemplate) { if (_self.$vnode.data.inlineTemplate) {
renderCell = function() { renderCell = function() {
data._self = _self.context || data._self; data._self = _self.context || data._self;
......
...@@ -965,8 +965,10 @@ describe('Table', () => { ...@@ -965,8 +965,10 @@ describe('Table', () => {
return createVue({ return createVue({
template: ` template: `
<el-table row-key="id" :data="testData" @expand="handleExpand" ${extra}> <el-table row-key="id" :data="testData" @expand="handleExpand" ${extra}>
<el-table-column type="expand" inline-template> <el-table-column type="expand">
<div>{{row.name}}</div> <template scope="props">
<div>{{props.row.name}}</div>
</template>
</el-table-column> </el-table-column>
<el-table-column prop="release" label="release" /> <el-table-column prop="release" label="release" />
<el-table-column prop="director" label="director" /> <el-table-column prop="director" label="director" />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment