diff --git a/package.json b/package.json index 76499a92..f5477f82 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "test:unit": "vue-cli-service test:unit" }, "dependencies": { - "@d2-projects/d2-crud": "^1.2.0", + "@d2-projects/d2-crud": "^1.3.4", "axios": "^0.17.1", "babel-polyfill": "^6.26.0", "better-scroll": "^1.12.1", diff --git a/src/pages/demo/d2-crud/demo16/code.js b/src/pages/demo/d2-crud/demo16/code.js index 3e88e106..61118115 100644 --- a/src/pages/demo/d2-crud/demo16/code.js +++ b/src/pages/demo/d2-crud/demo16/code.js @@ -87,7 +87,11 @@ export default { message: '保存成功', type: 'success' }); - done() + + // done可以传入一个对象来修改提交的某个字段 + done({ + address: '我是通过done事件传入的数据！' + }) this.formOptions.saveLoading = false }, 300); }, diff --git a/src/pages/demo/d2-crud/demo16/doc.md b/src/pages/demo/d2-crud/demo16/doc.md index 1e7023ed..509e20bd 100644 --- a/src/pages/demo/d2-crud/demo16/doc.md +++ b/src/pages/demo/d2-crud/demo16/doc.md @@ -1 +1 @@ -通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下： +通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据。代码如下： diff --git a/src/pages/demo/d2-crud/demo16/index.vue b/src/pages/demo/d2-crud/demo16/index.vue index 62aed4e8..a7858868 100644 --- a/src/pages/demo/d2-crud/demo16/index.vue +++ b/src/pages/demo/d2-crud/demo16/index.vue @@ -104,7 +104,9 @@ export default { message: '保存成功', type: 'success' }) - done() + done({ + address: '我是通过done事件传入的数据！' + }) this.formOptions.saveLoading = false }, 300) }, diff --git a/src/pages/demo/d2-crud/demo17/code.js b/src/pages/demo/d2-crud/demo17/code.js index a7c1178b..3d0f9a66 100644 --- a/src/pages/demo/d2-crud/demo17/code.js +++ b/src/pages/demo/d2-crud/demo17/code.js @@ -139,7 +139,11 @@ export default { message: '编辑成功', type: 'success' }) - done() + + // done可以传入一个对象来修改提交的某个字段 + done({ + address: '我是通过done事件传入的数据！' + }) this.formOptions.saveLoading = false }, 300) }, diff --git a/src/pages/demo/d2-crud/demo17/doc.md b/src/pages/demo/d2-crud/demo17/doc.md index 4c503e83..d5da9a8b 100644 --- a/src/pages/demo/d2-crud/demo17/doc.md +++ b/src/pages/demo/d2-crud/demo17/doc.md @@ -1 +1 @@ -通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下： +通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据。代码如下： diff --git a/src/pages/demo/d2-crud/demo17/index.vue b/src/pages/demo/d2-crud/demo17/index.vue index 7c216529..cd6b0d40 100644 --- a/src/pages/demo/d2-crud/demo17/index.vue +++ b/src/pages/demo/d2-crud/demo17/index.vue @@ -156,7 +156,9 @@ export default { message: '编辑成功', type: 'success' }) - done() + done({ + address: '我是通过done事件传入的数据！' + }) this.formOptions.saveLoading = false }, 300) }, diff --git a/src/pages/demo/d2-crud/demo25/MyTag.vue b/src/pages/demo/d2-crud/demo25/MyTag.vue index 5c0091c7..fc9e4829 100644 --- a/src/pages/demo/d2-crud/demo25/MyTag.vue +++ b/src/pages/demo/d2-crud/demo25/MyTag.vue @@ -10,6 +10,12 @@ export default { value: { type: Boolean, require: true + }, + scope: { + default: null + }, + myProps: { + default: null } }, computed: { @@ -20,6 +26,10 @@ export default { return this.value ? '是' : '否' } }, + mounted () { + console.log(this.scope) + console.log(this.myProps) + }, methods: { handleClick () { this.$emit('input', !this.value) diff --git a/src/pages/demo/d2-crud/demo25/codeComponent.js b/src/pages/demo/d2-crud/demo25/codeComponent.js index eb01844b..caae5eed 100644 --- a/src/pages/demo/d2-crud/demo25/codeComponent.js +++ b/src/pages/demo/d2-crud/demo25/codeComponent.js @@ -10,6 +10,16 @@ export default { value: { type: Boolean, require: true + }, + + // 本行的所有数据，此字段不需要额外配置 + scope: { + default: null + }, + + // 通过 component 中 props 字段传过来的数据，此字段需要先在 component 中配置 + myProps: { + default: null } }, computed: { @@ -20,6 +30,10 @@ export default { return this.value ? '是' : '否' } }, + mounted () { + console.log(this.scope) + console.log(this.myProps) + }, methods: { handleClick () { this.$emit('input', !this.value) diff --git a/src/pages/demo/d2-crud/demo25/codeOverall.js b/src/pages/demo/d2-crud/demo25/codeOverall.js index e71c2d3d..43c8ecc5 100644 --- a/src/pages/demo/d2-crud/demo25/codeOverall.js +++ b/src/pages/demo/d2-crud/demo25/codeOverall.js @@ -31,7 +31,10 @@ export default { title: '检查状态（点击可修改）', key: 'check', component: { - name: 'my-tag' + name: 'my-tag', + props: { + myProps: '我是通过props传过来的数据！' + } } } ], diff --git a/src/pages/demo/d2-crud/demo25/codePart.js b/src/pages/demo/d2-crud/demo25/codePart.js index 3ba9fbb9..f4cb3db4 100644 --- a/src/pages/demo/d2-crud/demo25/codePart.js +++ b/src/pages/demo/d2-crud/demo25/codePart.js @@ -36,7 +36,10 @@ export default { title: '检查状态（点击可修改）', key: 'check', component: { - name: MyTag + name: MyTag, + props: { + myProps: '我是通过props传过来的数据！' + } } } ], diff --git a/src/pages/demo/d2-crud/demo25/doc.md b/src/pages/demo/d2-crud/demo25/doc.md index 7b9fd03d..e6ae9c77 100644 --- a/src/pages/demo/d2-crud/demo25/doc.md +++ b/src/pages/demo/d2-crud/demo25/doc.md @@ -1 +1 @@ -向 `columns` 的 `component` 对象的 `name` 传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，代码如下： +向 `columns` 的 `component` 对象的 `name` 传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，可以在 `component` 中传入 `props` 字段，传入的字段可以在自定义组件中通过 `props` 接收，自定义组件还可以通过在 `props` 中定义 `scope` 字段来拿到当前行的所有数据，代码如下： diff --git a/src/pages/demo/d2-crud/demo25/index.vue b/src/pages/demo/d2-crud/demo25/index.vue index d38e2a5f..6a5e81c7 100644 --- a/src/pages/demo/d2-crud/demo25/index.vue +++ b/src/pages/demo/d2-crud/demo25/index.vue @@ -64,7 +64,10 @@ export default { title: '检查状态（点击可修改）', key: 'check', component: { - name: MyTag + name: MyTag, + props: { + myProps: '我是通过props传过来的数据！' + } } } ],