d2-crud 删除数据

Former-commit-id: 019b2c66555c4dcac4edba4164884d1aaee56ccb [formerly 019b2c66555c4dcac4edba4164884d1aaee56ccb [formerly 019b2c66555c4dcac4edba4164884d1aaee56ccb [formerly 019b2c66555c4dcac4edba4164884d1aaee56ccb [formerly 38a3534cc94754468535b0c293c453cad8ef9f20 [formerly 5c60b7989654eab0f90525377789458ee1a692e8]]]]]
Former-commit-id: 16899b32bb2702388c4c2cd81a1681a4c7fff9d4
Former-commit-id: 1b1b9df9690201ae4086653f17297325c33097b1
Former-commit-id: 149d2dede6f2726968387feb44dd1d7f7df7e397 [formerly 5cb19844aa5e80a91caa18224a1e0b00c102e67b]
Former-commit-id: 8e4cb42d46522b3e3fc284e2d702febc7ea4acf0
Former-commit-id: b6ae22c084f04e7ae53317c1098bec48aef8e40d
Former-commit-id: 393fcda757535a4dfdae84332c120e5f110f3af2
Former-commit-id: 80c4b506b80febb5474a95f4473f64cdb353b75b
Former-commit-id: 47f57c3c4b5cc2aedac456d61bed1a88d9585bd4

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

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

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

@@ -0,0 +1,76 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @row-remove="handleRowRemove"/>
+  </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: {
+        remove: {
+          icon: 'el-icon-delete',
+          size: 'small',
+          fixed: 'right',
+          confirm: true
+        }
+      }
+    }
+  },
+  methods: {
+    handleRowRemove ({index, row}, done) {
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+        done()
+      }, 300)
+    }
+  }
+}
+</script>`

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

@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `remove` 对象可以开启删除模式，`confirm` 属性的值为 `Boolean` 类型，控制删除前是否弹出confirm框进行提示， `row-remove` 事件控制数据删除，参数： `index` 是当前删除行的索引， `row` 是当前删除行的数据， `done` 用于控制删除成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：

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

@@ -0,0 +1,92 @@
+<template>
+  <d2-container>
+    <template slot="header">删除数据</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @row-remove="handleRowRemove">
+    </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: {
+        remove: {
+          icon: 'el-icon-delete',
+          size: 'small',
+          fixed: 'right',
+          confirm: true
+        }
+      }
+    }
+  },
+  methods: {
+    handleRowRemove ({index, row}, done) {
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+        done()
+      }, 300)
+    }
+  }
+}
+</script>

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

@@ -1 +1 @@
-3bf22d5f8e04524c6e8b3a3e5dc97fb66ea3f51d
+4f35ee266511f772688d28a0c6d4b7a56c384dc4