d2-crud 自定义操作列

Former-commit-id: 4ef8d5658c9d9d42ba836243ddaa05246068e5c6 [formerly 4ef8d5658c9d9d42ba836243ddaa05246068e5c6 [formerly 4ef8d5658c9d9d42ba836243ddaa05246068e5c6 [formerly 4ef8d5658c9d9d42ba836243ddaa05246068e5c6 [formerly fea6d506b8eea367b160660ae0d9a9ca092db5de [formerly f408b1155caa3e9947904464fcd02c808a4cfc4c]]]]]
Former-commit-id: 861f8d8d90c219a77c697ea6b7dea934f3dc1f3a
Former-commit-id: 390ffaa2967f713d81ecdd8640ea8f6031245af6
Former-commit-id: db9412b70e3ba7ed4088e0ca116229c9581b051e [formerly 3c5eb7c71430a3534822d0335fcc6dbf0dd9c68f]
Former-commit-id: 8d6e9cfff830ef0aecbb7e6922629ec695672307
Former-commit-id: b1ae17e6053d04300c67a10d0ea42fc5ae0f5748
Former-commit-id: cefbf05cb9427468d82f985078880a166a90d99d
Former-commit-id: dcfc4e8711ab7e3169af3c59727346cc41118e77
Former-commit-id: 8425adff3f07ccc49018864127ac8b82082ebd76

docs/zh/ecosystem-d2-crud/example.md

@@ -27,3 +27,4 @@
 | 新增数据 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo16) |
 | 修改数据 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo17) |
 | 删除数据 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo18) |
+| 自定义操作列 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo19) |

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

@@ -29,7 +29,8 @@ export default {
       children: [
         { path: `${pre}demo16`, title: '新增数据' },
         { path: `${pre}demo17`, title: '修改数据' },
-        { path: `${pre}demo18`, title: '删除数据' }
+        { path: `${pre}demo18`, title: '删除数据' },
+        { path: `${pre}demo19`, title: '自定义操作列' }
       ]
     }
   ])('/demo/d2-crud/')

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

@@ -0,0 +1,71 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @custom-emit-1="handleCustomEvent"/>
+  </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: {
+        custom: [
+          {
+            text: '自定义按钮',
+            type: 'warning',
+            size: 'small',
+            emit: 'custom-emit-1'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleCustomEvent ({index, row}) {
+      console.log(index)
+      console.log(row)
+    }
+  }
+}
+</script>`

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

@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `custom` 数组对象可以自定义模式，数组中每一个对象定义一个自定义按钮，对象属性支持所有的 `el-button` 属性， `emit` 属性定义了监听的事件，例如 `emit` 的值为 `custom-emit-1`，就在 `D2 Crud` 中监听 `custom-emit-1` 事件 监听的事件参数： `index` 是当前行的索引， `row` 是当前行的数据。代码如下：

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

@@ -0,0 +1,87 @@
+<template>
+  <d2-container>
+    <template slot="header">自定义操作列</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @custom-emit-1="handleCustomEvent">
+    </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'
+        },
+        {
+          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: {
+        custom: [
+          {
+            text: '自定义按钮',
+            type: 'warning',
+            size: 'small',
+            emit: 'custom-emit-1'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleCustomEvent ({index, row}) {
+      console.log(index)
+      console.log(row)
+    }
+  }
+}
+</script>

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

@@ -1 +1 @@
-4f35ee266511f772688d28a0c6d4b7a56c384dc4
+26b368ef188e9a3e98907e503a2e01368c4ad328