sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

d2-crud 合并列

Browse Source 
Former-commit-id: 61f0bf476d38f13a71fea60cd35875a8f8c6b193 [formerly 0b8b0f3c228dfb0af0d01c3483779eb96de6144b] [formerly 61f0bf476d38f13a71fea60cd35875a8f8c6b193 [formerly 0b8b0f3c228dfb0af0d01c3483779eb96de6144b] [formerly 61f0bf476d38f13a71fea60cd35875a8f8c6b193 [formerly 0b8b0f3c228dfb0af0d01c3483779eb96de6144b] [formerly 0b8b0f3c228dfb0af0d01c3483779eb96de6144b [formerly 92038730b9d8fb5bc52f8b87cf2195a607a65a62 [formerly 6e72a7753cf41cc2b06a9473251fcb00e83389ba]]]]]
Former-commit-id: 92c89f3b0f6af713f67cfab3ad61d36b30198642
Former-commit-id: 19c2829be9add9943a9f447396ab22f9f0401dc0
Former-commit-id: c3fd6a0caac3ceedcd18a7ffd077db370c281f9b [formerly b70995c66c7d52701dd6dcdb3bfcc7604a53efc8]
Former-commit-id: d5ba3bac71f52f21c55161c6dbff1be612a094e8
Former-commit-id: 5661530a3999c3c00469896bd1a9c1908f2bbf17
Former-commit-id: 8dec1298b9e0f34ad446f027e8973bfa8f579d13
Former-commit-id: 45f0d49ed5aa528c1f518227d6f50a0b223c8da9
Former-commit-id: b8dfc740b60a7f61c9fdc444109e0d8013b9f1a5
This commit is contained in:
孙昊翔
2018-08-28 10:46:48 +08:00
parent 983eab079d
commit b230716661
7 changed files with 212 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/zh/ecosystem-d2-crud/example.md
View File

@@ -14,4 +14,6 @@
| 多选 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo10) |
| 排序 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo11) |
| 筛选 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo12) |
| 展开行 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo13) |
| 表尾合计行 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo13) |
| 合并行 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo14) |
| 合并列 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo15) |

3
src/menu/modules/demo-d2-crud.js
View File

@@ -17,6 +17,7 @@ export default {
{ path: `${pre}demo11`, title: '排序' },
{ path: `${pre}demo12`, title: '筛选' },
{ path: `${pre}demo13`, title: '表尾合计行' },
{ path: `${pre}demo14`, title: '合并行' }
{ path: `${pre}demo14`, title: '合并行' },
{ path: `${pre}demo15`, title: '合并列' }
])('/demo/d2-crud/')
}

2
src/pages/demo/d2-crud/demo14/doc.md
View File

@@ -1 +1 @@
通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。代码如下：
通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 `rowspan` ，第二个元素代表 `colspan` 。代码如下：

94
src/pages/demo/d2-crud/demo15/code.js Normal file
View File

@@ -0,0 +1,94 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:options="options"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: 'ID',
key: 'id'
},
{
title: '姓名',
key: 'name'
},
{
title: '数值 1',
key: 'amount1'
},
{
title: '数值 2',
key: 'amount2'
},
{
title: '数值 3',
key: 'amount3'
}
],
data: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
],
options: {
border: true,
spanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
}
}
</script>`

1
src/pages/demo/d2-crud/demo15/doc.md Normal file
View File

@@ -0,0 +1 @@
通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个键名为 `rowspan` 和 `colspan` 的对象。代码如下：

110
src/pages/demo/d2-crud/demo15/index.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<d2-container>
<template slot="header">合并列</template>
<d2-crud
:columns="columns"
:data="data"
:options="options">
</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: 'ID',
key: 'id'
},
{
title: '姓名',
key: 'name'
},
{
title: '数值 1',
key: 'amount1'
},
{
title: '数值 2',
key: 'amount2'
},
{
title: '数值 3',
key: 'amount3'
}
],
data: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
],
options: {
border: true,
spanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
}
}
</script>

2
src/router/routes.js.REMOVED.git-id
View File

@@ -1 +1 @@
4e65388c5605f3cec8e0c073312fab0a4dbd14ba
4ff3fa0ccc8c0d917bfa056ce7db7f4d9d4fb8c9