添加自定义组件示例

Former-commit-id: eb890f1e76db02d8b8613650a4620e0815a2adaa [formerly eb890f1e76db02d8b8613650a4620e0815a2adaa [formerly eb890f1e76db02d8b8613650a4620e0815a2adaa [formerly eb890f1e76db02d8b8613650a4620e0815a2adaa [formerly 6c3a4338de7e3fd586a512bc3ed01607a6d35059 [formerly 82b81ed3a29d38520c9604670dc7215f1d5b5174]]]]]
Former-commit-id: 4ea2f665b597d7be5475fcc52f72d5480b861f96
Former-commit-id: 6f021dbf6acf5a37c75de9136f988bc3a145478d
Former-commit-id: 73529e2785ecda05d6975294c252f1491484f8fd [formerly bec7cf3aef63adf5fb24202468f6e860d91c2eea]
Former-commit-id: f3300f293d8c3179a3261dc198f1ac84bacfcd82
Former-commit-id: 12bb9bc4d7512f3a5b58c8c94148b514b54885e9
Former-commit-id: 23a27dc9331d432f00f415b1fde86f80a11c60a4
Former-commit-id: 3ce60f0a0c26979cefb334119093c0d984c2459d
Former-commit-id: feb82325b2b2fd15d9a0ba9df800b800bb3da0b2

package.json

@@ -11,7 +11,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@d2-projects/d2-crud": "^1.0.2",
+    "@d2-projects/d2-crud": "^1.1.0",
     "axios": "^0.17.1",
     "babel-polyfill": "^6.26.0",
     "better-scroll": "^1.12.1",

src/menu/modules/demo-d2-crud.js

@@ -35,7 +35,9 @@ export default {
         { path: `${pre}demo20`, title: '表单组件渲染' },
         { path: `${pre}demo21`, title: '表单布局' },
         { path: `${pre}demo22`, title: '表单校验' },
-        { path: `${pre}demo23`, title: '表格内编辑' }
+        { path: `${pre}demo23`, title: '表格内编辑' },
+        { path: `${pre}demo25`, title: '表格自定义组件' },
+        { path: `${pre}demo26`, title: '表单自定义组件' }
       ]
     }
   ])('/demo/d2-crud/')

src/pages/demo/d2-crud/demo17/code.js

@@ -34,22 +34,30 @@ export default {
         {
           date: '2016-05-02',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
+          address: '上海市普陀区金沙江路 1518 弄',
+          forbidEdit: true,
+          showEditButton: true
         },
         {
           date: '2016-05-04',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
+          address: '上海市普陀区金沙江路 1517 弄',
+          forbidEdit: false,
+          showEditButton: true
         },
         {
           date: '2016-05-01',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
+          address: '上海市普陀区金沙江路 1519 弄',
+          forbidEdit: false,
+          showEditButton: false
         },
         {
           date: '2016-05-03',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
+          address: '上海市普陀区金沙江路 1516 弄',
+          forbidEdit: false,
+          showEditButton: true
         }
       ],
       rowHandle: {
@@ -58,7 +66,18 @@ export default {
           icon: 'el-icon-edit',
           text: '点我进行编辑',
           size: 'small',
-          fixed: 'right'
+          show (index, row) {
+            if (row.showEditButton) {
+              return true
+            }
+            return false
+          },
+          disabled (index, row) {
+            if (row.forbidEdit) {
+              return true
+            }
+            return false
+          }
         }
       },
       formTemplate: {

src/pages/demo/d2-crud/demo17/index.vue

@@ -50,22 +50,30 @@ export default {
         {
           date: '2016-05-02',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
+          address: '上海市普陀区金沙江路 1518 弄',
+          forbidEdit: true,
+          showEditButton: true
         },
         {
           date: '2016-05-04',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
+          address: '上海市普陀区金沙江路 1517 弄',
+          forbidEdit: false,
+          showEditButton: true
         },
         {
           date: '2016-05-01',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
+          address: '上海市普陀区金沙江路 1519 弄',
+          forbidEdit: false,
+          showEditButton: false
         },
         {
           date: '2016-05-03',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
+          address: '上海市普陀区金沙江路 1516 弄',
+          forbidEdit: false,
+          showEditButton: true
         }
       ],
       rowHandle: {
@@ -74,7 +82,18 @@ export default {
           icon: 'el-icon-edit',
           text: '点我进行编辑',
           size: 'small',
-          fixed: 'right'
+          show (index, row) {
+            if (row.showEditButton) {
+              return true
+            }
+            return false
+          },
+          disabled (index, row) {
+            if (row.forbidEdit) {
+              return true
+            }
+            return false
+          }
         }
       },
       formTemplate: {

src/pages/demo/d2-crud/demo18/code.js

@@ -31,22 +31,30 @@ export default {
         {
           date: '2016-05-02',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
+          address: '上海市普陀区金沙江路 1518 弄',
+          forbidRemove: true,
+          showRemoveButton: true
         },
         {
           date: '2016-05-04',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
+          address: '上海市普陀区金沙江路 1517 弄',
+          forbidRemove: false,
+          showRemoveButton: true
         },
         {
           date: '2016-05-01',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
+          address: '上海市普陀区金沙江路 1519 弄',
+          forbidRemove: false,
+          showRemoveButton: false
         },
         {
           date: '2016-05-03',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
+          address: '上海市普陀区金沙江路 1516 弄',
+          forbidRemove: false,
+          showRemoveButton: true
         }
       ],
       rowHandle: {
@@ -54,7 +62,19 @@ export default {
           icon: 'el-icon-delete',
           size: 'small',
           fixed: 'right',
-          confirm: true
+          confirm: true,
+          show (index, row) {
+            if (row.showRemoveButton) {
+              return true
+            }
+            return false
+          },
+          disabled (index, row) {
+            if (row.forbidRemove) {
+              return true
+            }
+            return false
+          }
         }
       }
     }

src/pages/demo/d2-crud/demo18/index.vue

@@ -47,22 +47,30 @@ export default {
         {
           date: '2016-05-02',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
+          address: '上海市普陀区金沙江路 1518 弄',
+          forbidRemove: true,
+          showRemoveButton: true
         },
         {
           date: '2016-05-04',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
+          address: '上海市普陀区金沙江路 1517 弄',
+          forbidRemove: false,
+          showRemoveButton: true
         },
         {
           date: '2016-05-01',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
+          address: '上海市普陀区金沙江路 1519 弄',
+          forbidRemove: false,
+          showRemoveButton: false
         },
         {
           date: '2016-05-03',
           name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
+          address: '上海市普陀区金沙江路 1516 弄',
+          forbidRemove: false,
+          showRemoveButton: true
         }
       ],
       rowHandle: {
@@ -70,7 +78,19 @@ export default {
           icon: 'el-icon-delete',
           size: 'small',
           fixed: 'right',
-          confirm: true
+          confirm: true,
+          show (index, row) {
+            if (row.showRemoveButton) {
+              return true
+            }
+            return false
+          },
+          disabled (index, row) {
+            if (row.forbidRemove) {
+              return true
+            }
+            return false
+          }
         }
       }
     }

src/pages/demo/d2-crud/demo25/MyTag.vue

@@ -0,0 +1,29 @@
+<template>
+  <div style="cursor: pointer">
+    <el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      require: true
+    }
+  },
+  computed: {
+    type () {
+      return this.value ? 'success' : 'danger'
+    },
+    text () {
+      return this.value ? '是' : '否'
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('input', !this.value)
+    }
+  }
+}
+</script>

src/pages/demo/d2-crud/demo25/codeComponent.js

@@ -0,0 +1,29 @@
+export default `<template>
+  <div style="cursor: pointer">
+    <el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      require: true
+    }
+  },
+  computed: {
+    type () {
+      return this.value ? 'success' : 'danger'
+    },
+    text () {
+      return this.value ? '是' : '否'
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('input', !this.value)
+    }
+  }
+}
+</script>`

src/pages/demo/d2-crud/demo25/codeOverall.js

@@ -0,0 +1,72 @@
+export default `<template>
+  <div>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"
+      @d2-data-change="handleDataChange"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        },
+        {
+          title: '检查状态（点击可修改）',
+          key: 'check',
+          component: {
+            name: 'my-tag'
+          }
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          check: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          check: false
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          check: true
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          check: true
+        }
+      ]
+    }
+  },
+  methods: {
+    handleDataChange (data) {
+      console.log(data)
+    }
+  }
+}
+</script>`

src/pages/demo/d2-crud/demo25/codePart.js

@@ -0,0 +1,77 @@
+export default `<template>
+  <div>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"
+      @d2-data-change="handleDataChange"/>
+  </div>
+</template>
+
+<script>
+import MyTag from './MyTag'
+
+export default {
+  components: {
+    MyTag
+  },
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        },
+        {
+          title: '检查状态（点击可修改）',
+          key: 'check',
+          component: {
+            name: MyTag
+          }
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          check: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          check: false
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          check: true
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          check: true
+        }
+      ]
+    }
+  },
+  methods: {
+    handleDataChange (data) {
+      console.log(data)
+    }
+  }
+}
+</script>`

src/pages/demo/d2-crud/demo25/doc.md

@@ -0,0 +1 @@
+向 `columns` 的 `component` 对象的 `name` 传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，代码如下：

src/pages/demo/d2-crud/demo25/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <d2-container>
+    <template slot="header">表格自定义组件</template>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"
+      @d2-data-change="handleDataChange"/>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <h4>全局注册写法：</h4>
+      <d2-highlight :code="codeOverall"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <h4>局部注册写法：</h4>
+      <d2-highlight :code="codePart"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <h4>自定义组件 MyTag 代码：</h4>
+      <d2-highlight :code="codeComponent"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="https://d2-projects.github.io/d2-admin-doc/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import codeOverall from './codeOverall.js'
+import codePart from './codePart.js'
+import codeComponent from './codeComponent.js'
+import MyTag from './MyTag'
+
+export default {
+  components: {
+    MyTag
+  },
+  data () {
+    return {
+      doc,
+      codeOverall,
+      codePart,
+      codeComponent,
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        },
+        {
+          title: '检查状态（点击可修改）',
+          key: 'check',
+          component: {
+            name: MyTag
+          }
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          check: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          check: false
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          check: true
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          check: true
+        }
+      ]
+    }
+  },
+  methods: {
+    handleDataChange (data) {
+      console.log(data)
+    }
+  }
+}
+</script>

src/pages/demo/d2-crud/demo26/MyTag.vue

@@ -0,0 +1,29 @@
+<template>
+  <div style="cursor: pointer">
+    <el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      require: true
+    }
+  },
+  computed: {
+    type () {
+      return this.value ? 'success' : 'danger'
+    },
+    text () {
+      return this.value ? '是' : '否'
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('input', !this.value)
+    }
+  }
+}
+</script>

src/pages/demo/d2-crud/demo26/codeComponent.js

@@ -0,0 +1,29 @@
+export default `<template>
+  <div style="cursor: pointer">
+    <el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      require: true
+    }
+  },
+  computed: {
+    type () {
+      return this.value ? 'success' : 'danger'
+    },
+    text () {
+      return this.value ? '是' : '否'
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('input', !this.value)
+    }
+  }
+}
+</script>`

src/pages/demo/d2-crud/demo26/codeOverall.js

@@ -0,0 +1,130 @@
+export default `<template>
+  <div>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      @d2-data-change="handleDataChange"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        },
+        {
+          title: '检查状态（点击可修改）',
+          key: 'check',
+          component: {
+            name: 'my-tag'
+          }
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          check: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          check: false
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          check: true
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          check: true
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我编辑自定义表单组件',
+          size: 'small'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        },
+        check: {
+          title: '检查状态（点击进行修改）',
+          value: false,
+          component: {
+            name: 'my-tag'
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleDataChange (data) {
+      console.log(data)
+    },
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>`

src/pages/demo/d2-crud/demo26/codePart.js

@@ -0,0 +1,135 @@
+export default `<template>
+  <div>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      @d2-data-change="handleDataChange"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+import MyTag from './MyTag'
+
+export default {
+  components: {
+    MyTag
+  },
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        },
+        {
+          title: '检查状态（点击可修改）',
+          key: 'check',
+          component: {
+            name: MyTag
+          }
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          check: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          check: false
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          check: true
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          check: true
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我编辑自定义表单组件',
+          size: 'small'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        },
+        check: {
+          title: '检查状态（点击进行修改）',
+          value: false,
+          component: {
+            name: MyTag
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleDataChange (data) {
+      console.log(data)
+    },
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>`

src/pages/demo/d2-crud/demo26/doc.md

@@ -0,0 +1 @@
+向 `formTemplate` 中需要渲染自定义组件的 `component` 对象 `name` 中传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，代码如下：

src/pages/demo/d2-crud/demo26/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <d2-container>
+    <template slot="header">表单自定义组件</template>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      @d2-data-change="handleDataChange"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"/>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <h4>全局注册写法：</h4>
+      <d2-highlight :code="codeOverall"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <h4>局部注册写法：</h4>
+      <d2-highlight :code="codePart"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <h4>自定义组件 MyTag 代码：</h4>
+      <d2-highlight :code="codeComponent"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="https://d2-projects.github.io/d2-admin-doc/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import codeOverall from './codeOverall.js'
+import codePart from './codePart.js'
+import codeComponent from './codeComponent.js'
+import MyTag from './MyTag'
+
+export default {
+  components: {
+    MyTag
+  },
+  data () {
+    return {
+      doc,
+      codeOverall,
+      codePart,
+      codeComponent,
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        },
+        {
+          title: '检查状态（点击可修改）',
+          key: 'check',
+          component: {
+            name: MyTag
+          }
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          check: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          check: false
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          check: true
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          check: true
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我编辑自定义表单组件',
+          size: 'small'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        },
+        check: {
+          title: '检查状态（点击进行修改）',
+          value: false,
+          component: {
+            name: MyTag
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleDataChange (data) {
+      console.log(data)
+    },
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>

src/router/routes.js.REMOVED.git-id

@@ -1 +1 @@
-8f7502120cb1936fb8f1ef83f9462574f64d9d4b
+e5f86ceea9da8ed5238a065835a8d86dfa3cf688

yarn.lock.REMOVED.git-id

@@ -1 +1 @@
-ee5cecf1e3ba566cb1ff834db9f3c1f9d910fb26
+98d7a73c1fb484dbcca94b8f6a41f916b8a30c20