demo17

Former-commit-id: 3f8978cbce003b596c3c70cef9b5e3b7fea67919 [formerly 3f8978cbce003b596c3c70cef9b5e3b7fea67919 [formerly 3f8978cbce003b596c3c70cef9b5e3b7fea67919 [formerly 3f8978cbce003b596c3c70cef9b5e3b7fea67919 [formerly af03b248ed130578a52df68cc9f056ff74c97f84 [formerly 8571b957930a1b3f44d064d6684485ca3cbdf7f5]]]]]
Former-commit-id: 29fb645bf91fbb79fa25644600a428133fc215ca
Former-commit-id: d912c2fb62daf287a8127a72eb33573cc8df189a
Former-commit-id: 515ff8c21c5504054a105034aa29d33e8d1fb231 [formerly 17d1479cea563999e628205edfd604fa7984a635]
Former-commit-id: 15d093c854129e2dc3fd1a2c753116271953b05e
Former-commit-id: 12cd7f74e5c91d9fcced2aee4e87784299e0d8f6
Former-commit-id: 002892c7df27cffcc34e68011f192b012769eca3
Former-commit-id: 821d2a86d3ac89e34294f36e096e8e8499569a68
Former-commit-id: b5057b8958e81ef6a8c12df48d425ad64629167a

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

@@ -1,16 +1,16 @@
 export default `<template>
   <div>
     <d2-crud
+      ref="d2Crud"
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
-      add-mode
       :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
       :form-options="formOptions"
-      @row-add="handleRowAdd"
       @row-edit="handleRowEdit"
-      @dialog-cancel="handleDialogCancel"/>
+      @dialog-cancel="handleDialogCancel">
+        <el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
+      </d2-crud>
   </div>
 </template>
 
@@ -82,7 +82,7 @@ export default {
           }
         }
       },
-      formTemplate: {
+      editTemplate: {
         date: {
           title: '日期',
           value: ''
@@ -118,17 +118,21 @@ export default {
     }
   },
   methods: {
-    handleRowAdd (row, done) {
+    editRowWithNewTemplate () {
-      this.formOptions.saveLoading = true
+      this.$refs.d2Crud.showDialog({
-      setTimeout(() => {
+        mode: "edit",
-        console.log(row)
+        rowIndex: 2,
-        this.$message({
+        template: {
-          message: '保存成功',
+          date: {
-          type: 'success'
+            title: '日期',
-        })
+            value: ''
-        done()
+          },
-        this.formOptions.saveLoading = false
+          name: {
-      }, 300)
+            title: '姓名',
+            value: ''
+          }
+        }
+      })
     },
     handleRowEdit ({index, row}, done) {
       this.formOptions.saveLoading = true

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

@@ -1 +1 @@
-通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消编辑。代码如下：
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `edit-template` 来为编辑添加模板，通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'edit'` 、`rowIndex` 属性和 `template`对象，可使用自定义模板编辑指定行，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消编辑。代码如下：

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

@@ -2,16 +2,15 @@
   <d2-container :filename="filename">
     <template slot="header">修改数据</template>
     <d2-crud
+      ref="d2Crud"
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
-      add-mode
       :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
       :form-options="formOptions"
-      @row-add="handleRowAdd"
       @row-edit="handleRowEdit"
       @dialog-cancel="handleDialogCancel">
+      <el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
     </d2-crud>
     <el-card shadow="never" class="d2-mb">
       <d2-markdown :source="doc"/>
@@ -99,7 +98,7 @@ export default {
           }
         }
       },
-      formTemplate: {
+      editTemplate: {
         date: {
           title: '日期',
           value: ''
@@ -135,17 +134,21 @@ export default {
     }
   },
   methods: {
-    handleRowAdd (row, done) {
+    editRowWithNewTemplate () {
-      this.formOptions.saveLoading = true
+      this.$refs.d2Crud.showDialog({
-      setTimeout(() => {
+        mode: "edit",
-        console.log(row)
+        rowIndex: 2,
-        this.$message({
+        template: {
-          message: '保存成功',
+          date: {
-          type: 'success'
+            title: '日期',
-        })
+            value: ''
-        done()
+          },
-        this.formOptions.saveLoading = false
+          name: {
-      }, 300)
+            title: '姓名',
+            value: ''
+          }
+        }
+      })
     },
     handleRowEdit ({ index, row }, done) {
       this.formOptions.saveLoading = true

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

@@ -3,7 +3,6 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       @row-remove="handleRowRemove"/>
   </div>

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

@@ -4,7 +4,6 @@
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       @row-remove="handleRowRemove">
     </d2-crud>

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

@@ -3,7 +3,6 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       @custom-emit-1="handleCustomEvent"/>
   </div>

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

@@ -4,7 +4,6 @@
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       @custom-emit-1="handleCustomEvent">
     </d2-crud>

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

@@ -3,7 +3,6 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       :form-template="formTemplate"
       :form-options="formOptions"

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

@@ -4,7 +4,6 @@
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       :form-template="formTemplate"
       :form-options="formOptions"

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

@@ -3,7 +3,6 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       :form-template="formTemplate"
       :form-options="formOptions"

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

@@ -4,7 +4,6 @@
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       :form-template="formTemplate"
       :form-options="formOptions"

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

@@ -3,7 +3,6 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       add-mode
       :add-button="addButton"
       :form-template="formTemplate"

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

@@ -4,7 +4,6 @@
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       add-mode
       :add-button="addButton"
       :form-template="formTemplate"