mirror of https://github.com/ElemeFE/element
Table: expand row feature only supports scoped slot.
parent
7f35ee1423
commit
4817e116e5
|
@ -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` 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
|
||||
<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"
|
||||
|
|
|
@ -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="日期"
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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>)
|
||||
: ''
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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" />
|
||||
|
|
Loading…
Reference in New Issue