d2 crud slot例子

Former-commit-id: 96a5c6a729dc33378b740168add590544baadb8a [formerly 96a5c6a729dc33378b740168add590544baadb8a [formerly 96a5c6a729dc33378b740168add590544baadb8a [formerly 96a5c6a729dc33378b740168add590544baadb8a [formerly 680bdfbaaec6a0df2db5edcce1381f7d8f69f8b7 [formerly 9b1196542bb6df3e0210124276ceda0c73351f07]]]]]
Former-commit-id: bb2d6c34d185e79bc456ca172771dcf873b3b908
Former-commit-id: 1b6c84741450a6d46d6abbeb7ae7a838474bd3aa
Former-commit-id: 0a8c3bcc2e5918d6e01e76bb321085056246f6d2 [formerly c25c13b6eda4157fdaf6e17990aa93855f05ecee]
Former-commit-id: 129d082a1ac4fd5cbc2cb3c0d4a018e6f987d0d7
Former-commit-id: 6b3458117e759e3422f97b046a82302092df7168
Former-commit-id: b2e403f6031cc8f821216d1e1750715b3ef89e9c
Former-commit-id: 8274e6e668c7ddf38b52de39789c737cd8317247
Former-commit-id: b5be8f837099a2b4954c0ae403d4960b5c578264

src/menu/modules/demo-d2-crud.js

@@ -21,7 +21,8 @@ export default {
         { path: `${pre}demo12`, title: '筛选' },
         { path: `${pre}demo13`, title: '表尾合计行' },
         { path: `${pre}demo14`, title: '合并行' },
-        { path: `${pre}demo15`, title: '合并列' }
+        { path: `${pre}demo15`, title: '合并列' },
+        { path: `${pre}demo24`, title: '表格slot' }
       ]
     },
     {

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

@@ -0,0 +1,61 @@
+export default `<template>
+  <div>
+  <d2-crud
+    ref="d2Crud"
+    :columns="columns"
+    :data="data">
+    <el-button slot="headerButton">自定义按钮1</el-button>
+    <el-button slot="headerButton" type="primary" round>自定义按钮2</el-button>
+  </d2-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          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 弄'
+        }
+      ]
+    }
+  },
+  mounted () {
+    console.log(this.$refs.d2Crud.d2Data)
+  }
+}
+</script>`

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

@@ -0,0 +1 @@
+`headerButton` slot 可以在表头添加自定义按钮。代码如下：

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

@@ -0,0 +1,76 @@
+<template>
+  <d2-container>
+    <template slot="header">表格slot</template>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data">
+      <el-button slot="headerButton">自定义按钮1</el-button>
+      <el-button slot="headerButton" type="primary" round>自定义按钮2</el-button>
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="D2 CRUD" link="https://github.com/d2-projects/d2-crud"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          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 弄'
+        }
+      ]
+    }
+  },
+  mounted () {
+    console.log(this.$refs.d2Crud.d2Data)
+  }
+}
+</script>

src/router/routes.js.REMOVED.git-id

@@ -1 +1 @@
-49fda24126560af976b40d0e8a29042af7df7d34
+67bc36bcd02e1d0746d44d23553d6849638f19d2

yarn.lock.REMOVED.git-id

@@ -1 +1 @@
-44291d399f7241e2f8385a408fcc1521b0f58d96
+ee5cecf1e3ba566cb1ff834db9f3c1f9d910fb26