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: 075bb98e3a8025983593f2643baa7cb279979010 [formerly 075bb98e3a8025983593f2643baa7cb279979010 [formerly 075bb98e3a8025983593f2643baa7cb279979010 [formerly 075bb98e3a8025983593f2643baa7cb279979010 [formerly 6f98a5af744930b23290a07491100e94b7106eb1 [formerly bf17e0ffe3ee74418b9520d24756a31a8f77e5e8]]]]]
Former-commit-id: b1af95303057610e6c16551bff28cf4f80636713
Former-commit-id: c27e8e4e083b5e215901c02542db13c7b4f26ea0
Former-commit-id: 6b043daac144ba22b0edbb97f38c0e33eb0c0f71 [formerly 1ffb5790ae8c849a87e97cdf37acc899871616a4]
Former-commit-id: 36ffdaa250b6222fdf7660b535c7f03049b90bec
Former-commit-id: 52229a4b93280c5a058027a334b4d3ae66bad4eb
Former-commit-id: e5409c0be931f296255904ab59aeb9fb7be94cac
Former-commit-id: 2cb13f7e424933417bda248282335dfe81116a59
Former-commit-id: e6446076b0919738fae215a09eb64ffd3ebdfc4a
This commit is contained in:
孙昊翔
2018-08-27 15:48:13 +08:00
parent d0ce6dfbda
commit 135c1360e0
6 changed files with 243 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,3 +8,5 @@
| 带状态表格 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo4) | | 带状态表格 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo4) |
| 固定表头 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo5) | | 固定表头 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo5) |
| 固定列 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo6) | | 固定列 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo6) |
| 流体高度 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo7) |
| 多级表头 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo8) |

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

@@ -10,6 +10,7 @@ export default {
{ path: `${pre}demo4`, title: '带状态表格' }, { path: `${pre}demo4`, title: '带状态表格' },
{ path: `${pre}demo5`, title: '固定表头' }, { path: `${pre}demo5`, title: '固定表头' },
{ path: `${pre}demo6`, title: '固定列' }, { path: `${pre}demo6`, title: '固定列' },
{ path: `${pre}demo7`, title: '流体高度' } { path: `${pre}demo7`, title: '流体高度' },
{ path: `${pre}demo8`, title: '多级表头' }
])('/demo/d2-crud/') ])('/demo/d2-crud/')
} }

106
src/pages/demo/d2-crud/demo8/code.js Normal file
View File

@@ -0,0 +1,106 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '配送信息',
children: [
{
title: '姓名',
key: 'name'
},
{
title: '地址',
children: [
{
title: '省份',
key: 'province'
},
{
title: '市区',
key: 'city'
},
{
title: '地址',
key: 'address'
}
]
},
]
}
],
data: [
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}
]
}
}
}
</script>`

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

@@ -0,0 +1 @@
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系，只需在 `columns` 中使用 `children` 字段对子级表头进行嵌套即可。代码如下：

131
src/pages/demo/d2-crud/demo8/index.vue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<d2-container>
<template slot="header">多级表头</template>
<d2-crud
:columns="columns"
:data="data"/>
<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: '日期',
key: 'date'
},
{
title: '配送信息',
children: [
{
title: '姓名',
key: 'name'
},
{
title: '地址',
children: [
{
title: '省份',
key: 'province'
},
{
title: '市区',
key: 'city'
},
{
title: '地址',
key: 'address'
}
]
}
]
}
],
data: [
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}
]
}
}
}
</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 @@
be070eaabb8ab1511f21970333d6d65ecf391e10 1b0ae5476017971f2818adc72e8f78713e1a64f7