lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

d2-crud 表尾合计行 

Former-commit-id: 1613a107c50068a9e3fefa609a483a8a41a8d77a [formerly b6d9d897d614e67897365ea9a495061de555bea6] [formerly 1613a107c50068a9e3fefa609a483a8a41a8d77a [formerly b6d9d897d614e67897365ea9a495061de555bea6] [formerly 1613a107c50068a9e3fefa609a483a8a41a8d77a [formerly b6d9d897d614e67897365ea9a495061de555bea6] [formerly b6d9d897d614e67897365ea9a495061de555bea6 [formerly 5d11e80e3899eaefbd688a6edf0076822dce6992 [formerly 53793d817ab5e4a228cf22093807b11f9d5d6cb1]]]]]
Former-commit-id: 0b6ed5a308f47d6e04741dce8eb82bfae998847d
Former-commit-id: 34b836f3e0e7bb1b8333c3578bcb96a12b85f917
Former-commit-id: ac9f1306922bf26560df8674f43c76473a6b95d6 [formerly aacebfc5af47c8063b6011262b004eda356070d2]
Former-commit-id: ff485e8d5f93b0b7eafe8a491bea7f184c7c1192
Former-commit-id: 568809cd94d84ecb83c0165b3f93b5bcbd8d59fe
Former-commit-id: 60aac123002eef5f21dc7e2066845bba3255f4d6
Former-commit-id: 36044e37838abfb1e2aa99679ded38ca10a9e63d
Former-commit-id: a008c6b6defc73338e3e8524da1827b0f4f3f54f
This commit is contained in:
孙昊翔 2018-08-28 10:24:49 +08:00
parent 617bd67c65
commit 40b1a82851
14 changed files with 232 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,3 +13,5 @@
| 单选 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo9) |
| 多选 | [点我查看](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) |

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

@ -15,6 +15,7 @@ export default {
{ path: `${pre}demo9`, title: '单选' },
{ path: `${pre}demo10`, title: '多选' },
{ path: `${pre}demo11`, title: '排序' },
{ path: `${pre}demo12`, title: '筛选' }
{ path: `${pre}demo12`, title: '筛选' },
{ path: `${pre}demo13`, title: '表尾合计行' }
])('/demo/d2-crud/')
}

10
src/pages/demo/d2-crud/demo10/index.vue
View File

@ -73,13 +73,3 @@ export default {
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>

10
src/pages/demo/d2-crud/demo11/index.vue
View File

@ -74,13 +74,3 @@ export default {
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>

10
src/pages/demo/d2-crud/demo12/index.vue
View File

@ -82,13 +82,3 @@ export default {
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>

105
src/pages/demo/d2-crud/demo13/code.js Normal file
View File

@ -0,0 +1,105 @@
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: {
showSummary: true,
summaryMethod (param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价'
return
}
const values = data.map(item => Number(item[column.property]))
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
sums[index] += ' 元'
} else {
sums[index] = 'N/A'
}
})
return sums
}
}
}
}
}
</script>`

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

@ -0,0 +1 @@
将 `options` 中的 `showSummary` 设置为 `true` 就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 `sumText` 配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 `summaryMethod` 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。代码如下：

121
src/pages/demo/d2-crud/demo13/index.vue Normal file
View File

@ -0,0 +1,121 @@
<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: {
showSummary: true,
summaryMethod (param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价'
return
}
const values = data.map(item => Number(item[column.property]))
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
sums[index] += ' 元'
} else {
sums[index] = 'N/A'
}
})
return sums
}
}
}
}
}
</script>

10
src/pages/demo/d2-crud/demo5/index.vue
View File

@ -86,13 +86,3 @@ export default {
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>

10
src/pages/demo/d2-crud/demo6/index.vue
View File

@ -96,13 +96,3 @@ export default {
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>

10
src/pages/demo/d2-crud/demo7/index.vue
View File

@ -125,13 +125,3 @@ export default {
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>

10
src/pages/demo/d2-crud/demo8/index.vue
View File

@ -119,13 +119,3 @@ export default {
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>

10
src/pages/demo/d2-crud/demo9/index.vue
View File

@ -78,13 +78,3 @@ export default {
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>

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

@ -1 +1 @@
d4bcc9f74429353eb00fc5a9e835c0e86842cdfa
d83b0a5150e283432ed572257131cc3dcfadd519