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
2018-12-24 14:23:10 +08:00
parent 86d7f32edc
commit 6afb7bd6ab
13 changed files with 41 additions and 44 deletions
--- a/src/pages/demo/d2-crud/demo17/code.js
+++ b/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) {
-      this.formOptions.saveLoading = true
-      setTimeout(() => {
-        console.log(row)
-        this.$message({
-          message: '保存成功',
-          type: 'success'
-        })
-        done()
-        this.formOptions.saveLoading = false
-      }, 300)
+    editRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: "edit",
+        rowIndex: 2,
+        template: {
+          date: {
+            title: '日期',
+            value: ''
+          },
+          name: {
+            title: '姓名',
+            value: ''
+          }
+        }
+      })
    },
    handleRowEdit ({index, row}, done) {
      this.formOptions.saveLoading = true
--- a/src/pages/demo/d2-crud/demo17/doc.md
+++ b/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)` 可以取消编辑。代码如下：
--- a/src/pages/demo/d2-crud/demo17/index.vue
+++ b/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) {
-      this.formOptions.saveLoading = true
-      setTimeout(() => {
-        console.log(row)
-        this.$message({
-          message: '保存成功',
-          type: 'success'
-        })
-        done()
-        this.formOptions.saveLoading = false
-      }, 300)
+    editRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: "edit",
+        rowIndex: 2,
+        template: {
+          date: {
+            title: '日期',
+            value: ''
+          },
+          name: {
+            title: '姓名',
+            value: ''
+          }
+        }
+      })
    },
    handleRowEdit ({ index, row }, done) {
      this.formOptions.saveLoading = true
--- a/src/pages/demo/d2-crud/demo18/code.js
+++ b/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>
--- a/src/pages/demo/d2-crud/demo18/index.vue
+++ b/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>
--- a/src/pages/demo/d2-crud/demo19/code.js
+++ b/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>
--- a/src/pages/demo/d2-crud/demo19/index.vue
+++ b/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>
--- a/src/pages/demo/d2-crud/demo20/code.js
+++ b/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"
--- a/src/pages/demo/d2-crud/demo20/index.vue
+++ b/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"
--- a/src/pages/demo/d2-crud/demo21/code.js
+++ b/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"
--- a/src/pages/demo/d2-crud/demo21/index.vue
+++ b/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"
--- a/src/pages/demo/d2-crud/demo22/code.js
+++ b/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"
--- a/src/pages/demo/d2-crud/demo22/index.vue
+++ b/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"