feat:迭代3完成

src/test/component/dm-table/expand.js

+export default {
+    name: 'TableExpand',
+    functional: true,
+    props: {
+        row: Object,
+        render: Function,
+        index: Number,
+        column: {
+            type: Object,
+            default: null
+        }
+    },
+    render: (h, ctx) => {
+        const params = {
+            row: ctx.props.row,
+            index: ctx.props.index
+        };
+
+
+        function countDown(i) {
+          if (i<=0) {
+            return i;
+          } else {
+            countDown(i-1);
+          }
+          console.log(i)
+        }
+        if (ctx.props.column) params.column = ctx.props.column;
+        return ctx.props.render(h, params);
+    }
+};

src/test/component/dm-table/index.vue

@@ -34,15 +34,18 @@
           :filtered-value="v.filteredValue">
           <template slot-scope="scope">
             <!-- 如果有filter -->
-            <span v-if="v.render">
-               {{compile(v.render)}}
-            </span>
-            <span v-if="v.filter">
+            <Cell
+            v-if="v.render"
+            :row="scope.row"
+            :column="scope.column"
+            :index="scope.$index"
+            :render="v.render"></Cell>
+            <!-- <span v-if="v.filter">
               {{Vue.filter(v[filter])(scope.row[v.prop])}}
             </span>
             <span v-else-if="v.formatter">
               {{v.formatter(scope.row)}}
-            </span>
+            </span> -->
             <span v-else>
               {{scope.row[v.prop]}}
             </span>
@@ -57,11 +60,13 @@
 <script>
 import { Table } from 'element-ui';
 import Vue from 'vue';
+import Cell from './expand';
 
 export default {
   name:'dm-table',
   components:{
     'el-table':Table,
+    Cell
     // 'test-com':this.propComponents[0]
   },
   props:['columns','data','propComponents'],
@@ -69,11 +74,16 @@ export default {
   },
   methods:{
     compile(template) {
-      const span = document.createElement('span');
-      span.innerHTML = template;
-      console.log(this.$parent);
-      const dom = this.$parent.compile(span);    // 在父级上下文编译组件
-      return dom;
+      // this.$nextTick(_ => {
+        // console.log(this,this.$parent)
+        // compile
+      // })
+
+      // const span = document.createElement('span');
+      // span.innerHTML = template;
+      // // console.log(this);
+      // const dom = this.compile(span);    // 在父级上下文编译组件
+      // // return dom;
       // this.$el.appendChild(dom);    // 将编译后的html插入当前组件
     }
   }

src/test/example/dm-table.vue

@@ -30,10 +30,27 @@ export default {
         },
         columns: [
           { prop: 'name', label: '姓名', width: 140 },
-          { prop: 'mobile', label: '手机号码', minWidth: 180 },
+          { prop: 'mobile', label: '手机号码', minWidth: 180,
+            render: (row) => {
+              return '<div>12121</div>';
+            }
+          },
           { prop: 'sex', label: '性别', width: 100,
-            render: row => {
-              return `<testCom>${row.name}</testCom>`
+            render: (h, params) => {
+              return h('el-button', {
+                  props: {
+                      type: 'primary',
+                      size: 'small'
+                  },
+                  style: {
+                      marginRight: '5px'
+                  },
+                  on: {
+                      click: () => {
+                          this.show(params.index)
+                      }
+                  }
+              }, 'View')
             }
           }
         ],