添加自定义组件示例

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

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>`