Merge pull request #2045 from QingWei-Li/feat/table-expand-scoped-slot

Table: expand row feature only supports scoped slot.

examples/docs/en-US/table.md

@@ -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, and you can access the same attributes as when you are using `Scoped slot` in custom column templates.
 ```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"

examples/docs/zh-CN/table.md

@@ -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="日期"

package.json

@@ -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": {

packages/table/src/table-body.js

@@ -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>)
                 : ''

packages/table/src/table-column.js

@@ -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;

test/unit/specs/table.spec.js

@@ -1002,8 +1002,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" />