From b73ac2c4004a373df85aade00d43b425f3875228 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com> Date: Mon, 27 Aug 2018 17:41:09 +0800 Subject: [PATCH] =?UTF-8?q?d2-crud=20=E5=8D=95=E9=80=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly 5cced044ea5dda254eb1504a570e1b5b9afbb35e [formerly e0598d675e7026e265dcf4d5024f0f66ee9c1b39]]]]] Former-commit-id: 40e5719db55936e37f14ce5266a14d5e91ef23af Former-commit-id: c167dc8ab982f1ebf7ef6fcb6ee78c6ca15ed007 Former-commit-id: 193951ad3688cf7e83084340d1d7fe92acf906fa [formerly 74d1192239c08c93bbdffeb8b62e74aa85e3ae7f] Former-commit-id: fef418d170b006fb8416483d8896d4904ffb2134 Former-commit-id: 25f655562db68b4eda7bdbaa0c859e755607ae91 Former-commit-id: ffcca2588cc1853f7e9ba3235029f05cc71ce8e3 Former-commit-id: 2f93b38bd00d10a693a49f872bb81164b4221378 Former-commit-id: 51fbad2adf326e2789d4aa1931a4a138fb2dacd1 --- src/menu/modules/demo-d2-crud.js | 3 +- src/pages/demo/d2-crud/demo1/doc.md | 2 +- src/pages/demo/d2-crud/demo2/doc.md | 2 +- src/pages/demo/d2-crud/demo3/doc.md | 2 +- src/pages/demo/d2-crud/demo4/doc.md | 2 +- src/pages/demo/d2-crud/demo5/doc.md | 2 +- src/pages/demo/d2-crud/demo6/doc.md | 2 +- src/pages/demo/d2-crud/demo7/doc.md | 2 +- src/pages/demo/d2-crud/demo8/doc.md | 2 +- src/pages/demo/d2-crud/demo9/code.js | 64 ++++++++++++++++++ src/pages/demo/d2-crud/demo9/doc.md | 1 + src/pages/demo/d2-crud/demo9/index.vue | 90 ++++++++++++++++++++++++++ src/router/routes.js.REMOVED.git-id | 2 +- 13 files changed, 166 insertions(+), 10 deletions(-) create mode 100644 src/pages/demo/d2-crud/demo9/code.js create mode 100644 src/pages/demo/d2-crud/demo9/doc.md create mode 100644 src/pages/demo/d2-crud/demo9/index.vue diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js index 1c8c4fc1..c3b4686d 100644 --- a/src/menu/modules/demo-d2-crud.js +++ b/src/menu/modules/demo-d2-crud.js @@ -11,6 +11,7 @@ export default { { path: `${pre}demo5`, title: '固定表头' }, { path: `${pre}demo6`, title: '固定列' }, { path: `${pre}demo7`, title: '流体高度' }, - { path: `${pre}demo8`, title: '多级表头' } + { path: `${pre}demo8`, title: '多级表头' }, + { path: `${pre}demo9`, title: '单选' } ])('/demo/d2-crud/') } diff --git a/src/pages/demo/d2-crud/demo1/doc.md b/src/pages/demo/d2-crud/demo1/doc.md index 4695daf4..600721ad 100644 --- a/src/pages/demo/d2-crud/demo1/doc.md +++ b/src/pages/demo/d2-crud/demo1/doc.md @@ -1 +1 @@ -在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，可以在 `columns` 对象中传入 `width` 属性来控制列宽。代码如下： \ No newline at end of file +在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，可以在 `columns` 对象中传入 `width` 属性来控制列宽。代码如下： diff --git a/src/pages/demo/d2-crud/demo2/doc.md b/src/pages/demo/d2-crud/demo2/doc.md index 6e554c65..71a1f7c0 100644 --- a/src/pages/demo/d2-crud/demo2/doc.md +++ b/src/pages/demo/d2-crud/demo2/doc.md @@ -1 +1 @@ -`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下： \ No newline at end of file +`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下： diff --git a/src/pages/demo/d2-crud/demo3/doc.md b/src/pages/demo/d2-crud/demo3/doc.md index 56d5d43b..0ff20774 100644 --- a/src/pages/demo/d2-crud/demo3/doc.md +++ b/src/pages/demo/d2-crud/demo3/doc.md @@ -1 +1 @@ -默认情况下， `D2 Crud` 是不具有竖直方向的边框的，如果需要，可以在 `options` 对象中传入一个 `border` 属性，它接受一个 `Boolean` ，设置为 `true` 即可启用。代码如下： \ No newline at end of file +默认情况下， `D2 Crud` 是不具有竖直方向的边框的，如果需要，可以在 `options` 对象中传入一个 `border` 属性，它接受一个 `Boolean` ，设置为 `true` 即可启用。代码如下： diff --git a/src/pages/demo/d2-crud/demo4/doc.md b/src/pages/demo/d2-crud/demo4/doc.md index c68dfde1..ef0b14d1 100644 --- a/src/pages/demo/d2-crud/demo4/doc.md +++ b/src/pages/demo/d2-crud/demo4/doc.md @@ -1 +1 @@ -可以通过指定 `D2 Crud` 组件 `options` 对象中的 `rowClassName` 属性来为 `D2 Crud` 中的某一行添加 `class` ，表明该行处于某种状态。代码如下： \ No newline at end of file +可以通过指定 `D2 Crud` 组件 `options` 对象中的 `rowClassName` 属性来为 `D2 Crud` 中的某一行添加 `class` ，表明该行处于某种状态。代码如下： diff --git a/src/pages/demo/d2-crud/demo5/doc.md b/src/pages/demo/d2-crud/demo5/doc.md index 27edca6f..bae31834 100644 --- a/src/pages/demo/d2-crud/demo5/doc.md +++ b/src/pages/demo/d2-crud/demo5/doc.md @@ -1 +1 @@ -只要在 `options` 对象中定义了 `height` 属性，即可实现固定表头的表格，而不需要额外的代码。代码如下： \ No newline at end of file +只要在 `options` 对象中定义了 `height` 属性，即可实现固定表头的表格，而不需要额外的代码。代码如下： diff --git a/src/pages/demo/d2-crud/demo6/doc.md b/src/pages/demo/d2-crud/demo6/doc.md index 1cf1f937..e6ea2834 100644 --- a/src/pages/demo/d2-crud/demo6/doc.md +++ b/src/pages/demo/d2-crud/demo6/doc.md @@ -1 +1 @@ -固定列需要在 `columns` 对象数组中给需要固定的列传入 `fixed` 属性，它接受 `Boolean` 值或者 `left` `right` ，表示左边固定还是右边固定。代码如下： \ No newline at end of file +固定列需要在 `columns` 对象数组中给需要固定的列传入 `fixed` 属性，它接受 `Boolean` 值或者 `left` `right` ，表示左边固定还是右边固定。代码如下： diff --git a/src/pages/demo/d2-crud/demo7/doc.md b/src/pages/demo/d2-crud/demo7/doc.md index 264dba3b..79a8afe0 100644 --- a/src/pages/demo/d2-crud/demo7/doc.md +++ b/src/pages/demo/d2-crud/demo7/doc.md @@ -1 +1 @@ -通过在 `options` 对象设置 `maxHeight` 属性为 `D2 Crud` 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。代码如下： \ No newline at end of file +通过在 `options` 对象设置 `maxHeight` 属性为 `D2 Crud` 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。代码如下： diff --git a/src/pages/demo/d2-crud/demo8/doc.md b/src/pages/demo/d2-crud/demo8/doc.md index e7f46d62..31fcb94e 100644 --- a/src/pages/demo/d2-crud/demo8/doc.md +++ b/src/pages/demo/d2-crud/demo8/doc.md @@ -1 +1 @@ -数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系，只需在 `columns` 中使用 `children` 字段对子级表头进行嵌套即可。代码如下： \ No newline at end of file +数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系，只需在 `columns` 中使用 `children` 字段对子级表头进行嵌套即可。代码如下： diff --git a/src/pages/demo/d2-crud/demo9/code.js b/src/pages/demo/d2-crud/demo9/code.js new file mode 100644 index 00000000..c4b03ee9 --- /dev/null +++ b/src/pages/demo/d2-crud/demo9/code.js @@ -0,0 +1,64 @@ +export default ` + +` diff --git a/src/pages/demo/d2-crud/demo9/doc.md b/src/pages/demo/d2-crud/demo9/doc.md new file mode 100644 index 00000000..a6efc561 --- /dev/null +++ b/src/pages/demo/d2-crud/demo9/doc.md @@ -0,0 +1 @@ +`D2 Crud` 组件提供了单选的支持，只需要在 `options` 对象中将 `highlightCurrentRow` 属性设为 `true` 即可实现单选。之后由 `current-change` 事件来管理选中时触发的事件，它会传入 `currentRow` 和 `oldCurrentRow`。如果需要显示索引，需要配置 `index-row` 属性。代码如下： diff --git a/src/pages/demo/d2-crud/demo9/index.vue b/src/pages/demo/d2-crud/demo9/index.vue new file mode 100644 index 00000000..f1ba5874 --- /dev/null +++ b/src/pages/demo/d2-crud/demo9/index.vue @@ -0,0 +1,90 @@ + + + + + diff --git a/src/router/routes.js.REMOVED.git-id b/src/router/routes.js.REMOVED.git-id index e3ebee15..85d33efa 100644 --- a/src/router/routes.js.REMOVED.git-id +++ b/src/router/routes.js.REMOVED.git-id @@ -1 +1 @@ -1b0ae5476017971f2818adc72e8f78713e1a64f7 \ No newline at end of file +b8b55dc98d4d6c94c6fc66cd1e953f7637936ed4 \ No newline at end of file