d2-crud 表单组件渲染 表单布局

Former-commit-id: dffabbae052e82d011c49a482e2c6579b510131c [formerly dffabbae052e82d011c49a482e2c6579b510131c [formerly dffabbae052e82d011c49a482e2c6579b510131c [formerly dffabbae052e82d011c49a482e2c6579b510131c [formerly 393c14f4ef07c4f7920adb79d9784961826f909d [formerly fa929764dd324849a7d1032aa98cab34600f4d85]]]]]
Former-commit-id: 8f9e71375a306a4f71e9688e302327acfd1ccd6f
Former-commit-id: 5c4bc13c8c115282d98b5de8f56fa46cc523c2d6
Former-commit-id: 5c59b4084b8f86ce00488020787a1d8361c099c1 [formerly 818a62a1c53edf8827226e96a16ef7b38414a5a4]
Former-commit-id: eeb546c951042a284a8553cd4c4fe4f18804ff8b
Former-commit-id: 17fa37ebac025b07a355da563dc490aa39507877
Former-commit-id: d0f5a02d0af43ab33e8b59b22335182ef2527cf0
Former-commit-id: 8115efda42fdb71b1df18e56a7336df8117bd5c7
Former-commit-id: 9be41ad5cd1dbf6f772e64c0381e26b0a8eceb91

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

@@ -0,0 +1,117 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我查看表单布局',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '',
+          component: {
+            span: 12
+          }
+        },
+        name: {
+          title: '姓名',
+          value: '',
+          component: {
+            span: 12
+          }
+        },
+        address: {
+          title: '地址',
+          value: '',
+          component: {
+            span: 18
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false,
+        gutter: 20
+      }
+    }
+  },
+  methods: {
+    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>`