demo23

Former-commit-id: ab8efad363a2f1602c451f896366f454f840d25f [formerly ab8efad363a2f1602c451f896366f454f840d25f [formerly ab8efad363a2f1602c451f896366f454f840d25f [formerly ab8efad363a2f1602c451f896366f454f840d25f [formerly c9b73d210e1a62667cb62b37ace4e9471ef90e87 [formerly adc99648f4a6320caf8ce8d257424c273119e39d]]]]]
Former-commit-id: aa172c69b22148896cc6e27c5599fe42a0afc2f7
Former-commit-id: 83ecac80bd8d0066cf16e991f7449e257f08d817
Former-commit-id: 91f38ffb3a34d4ed1b605c2507720945d2a62b0d [formerly 2433e6394eeff33d424d1dc853c9db30dd72885e]
Former-commit-id: dad524c86d20f6d9fc4822502a350a97f3235a08
Former-commit-id: 594e49eb23e82b6dd3174a2aeec69915d582dece
Former-commit-id: e84456f20504cbb9b663a9a231099ced8655ff0d
Former-commit-id: 2fb4d85611c343221b5e02bac54a1fcaa9e25a46
Former-commit-id: 2a2229b3f0540538280ecbaabe92fe3fe3d496dd

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

@@ -2,7 +2,8 @@ export default `<template>
   <div>
     <d2-crud
       :columns="columns"
-      :data="data"/>
+      :data="data"
+      @cell-data-change="cellDataChange"/>
   </div>
 </template>
 
@@ -73,6 +74,14 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    cellDataChange ({rowIndex, key, value, row}) {
+      console.log(rowIndex)
+      console.log(key)
+      console.log(value)
+      console.log(row)
+    }
   }
 }
 </script>`

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

@@ -1 +1 @@
-向 `columns` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收两个参数： `h`是render函数的固定参数， `scope` 是单元格中的数据，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：
+向 `columns` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收两个参数： `h`是render函数的固定参数， `scope` 是单元格中的数据，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。通过 `cell-data-change`事件可以监听单元格内的数据变化，监听在crud内部是通过change事件触发的（这意味着input类组件失去焦点才会触发事件，单纯输入不会触发），接收一个对象参数 `{rowIndex, key, value, row}`， `rowIndex` 为改变所在行，`key` 为改变的字段，`value` 为改变后的值，`row` 是改变所在行的所有数据。代码如下：

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

@@ -3,7 +3,8 @@
     <template slot="header">表格内编辑</template>
     <d2-crud
       :columns="columns"
-      :data="data"/>
+      :data="data"
+      @cell-data-change="cellDataChange"/>
     <el-card shadow="never" class="d2-mb">
       <d2-markdown :source="doc"/>
     </el-card>
@@ -89,6 +90,14 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    cellDataChange ({rowIndex, key, value, row}) {
+      console.log(rowIndex)
+      console.log(key)
+      console.log(value)
+      console.log(row)
+    }
   }
 }
 </script>