d2-crud 基础表格

Former-commit-id: e570bc03852b769639b4888c85a07d6b60ec66b9 [formerly e570bc03852b769639b4888c85a07d6b60ec66b9 [formerly e570bc03852b769639b4888c85a07d6b60ec66b9 [formerly e570bc03852b769639b4888c85a07d6b60ec66b9 [formerly 707df6e0ca4a201395966c5e5db0e004d0d862fc [formerly 5a79488d6cc3085a3e2402dd4b2b05de73e12ef5]]]]]
Former-commit-id: 29aa5969dec9e481a39e6381488a9d14324e895e
Former-commit-id: 27f8d12d043c1ba6c198c8d953adbd8024ff07a6
Former-commit-id: 30222bdfe002872f406308fd6ce58fc4b095b040 [formerly 5d145a6340be0ea300cb77fb07848438cd06a00a]
Former-commit-id: 2254fedb068df677e5eb677081710d3947fe0b1f
Former-commit-id: 8f3dc6459698c11ab8c5b90f213d371ec39e9aa9
Former-commit-id: 420d4c39c6e0568249385387881a0378ff8d6221
Former-commit-id: c8dd9bbcc602ebe89b26bb8b62cc753f94171956
Former-commit-id: 8b4d42e1428c7340f56bcdfc4cd7b5f696fe7c97

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

@@ -1,6 +1,7 @@
 export default `<template>
   <div>
     <d2-crud
+      ref="d2Crud"
       :columns="columns"
       :data="data"/>
   </div>
@@ -49,6 +50,9 @@ export default {
         }
       ]
     }
+  },
+  mounted () {
+    console.log(this.$refs.d2Crud.d2Data)
   }
 }
 </script>`

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

@@ -1 +1 @@
-在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，可以在 `columns` 对象中传入 `width` 属性来控制列宽。代码如下：
+在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，`columns` 中的 `key` 需要与 `data` 中对象的key严格对照，可以在 `columns` 对象中传入 `width` 属性来控制列宽。当表格中的数据通过操作变化时，可以通过 `this.$refs.d2Crud.d2Data` 拿到变化后的表格数据。代码如下：

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

@@ -2,6 +2,7 @@
   <d2-container>
     <template slot="header">基础表格</template>
     <d2-crud
+      ref="d2Crud"
       :columns="columns"
       :data="data"/>
     <el-card shadow="never" class="d2-mb">
@@ -64,6 +65,9 @@ export default {
         }
       ]
     }
+  },
+  mounted () {
+    console.log(this.$refs.d2Crud.d2Data)
   }
 }
 </script>