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

d2-crud 固定表头 

Former-commit-id: 6e813a32d806c3153a4def37677c8a017d151e78 [formerly 6e813a32d806c3153a4def37677c8a017d151e78 [formerly 6e813a32d806c3153a4def37677c8a017d151e78 [formerly 6e813a32d806c3153a4def37677c8a017d151e78 [formerly 475b385a7c396bc6db5f2428cc40092996982ec1 [formerly 6f73e2109310b19624220cce2a255eddd82eb968]]]]]
Former-commit-id: 70c7b245c35e82091c21637d73d51abd0558ff1a
Former-commit-id: 1ab528bbc8f3ae48cb85b89fd988c2ff548a8bbf
Former-commit-id: ed732b6c562827a6701f497bc516eb7b4aad00d1 [formerly 5fa2b1e80d94f1a0a43e112308f89d6467c9b64a]
Former-commit-id: 213ba3df273d745cdbf9881c51f3181336b00c22
Former-commit-id: 37d6be18775d4cce10c02fd056a5e0452fdcc7c7
Former-commit-id: 0a40dfca74de82b788710cd5a591207bdee95c23
Former-commit-id: 0e85f76f6c36c9a03c99379055a137467f04f90d
Former-commit-id: 01450edd0e3818da8e0ced6c6815073b25f6d3f8
This commit is contained in:
孙昊翔 2018-08-27 14:30:53 +08:00
parent e7dbf2a6d1
commit f1379e707d
6 changed files with 180 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,8 @@
| 示例 | 代码与演示 |
| --- | --- |
| 基础表格 | [点我查看](https://fairyever.gitee.io//d2-admin-preview/#/demo/d2-crud/demo1) |
| 带斑马纹表格 | [点我查看](https://fairyever.gitee.io//d2-admin-preview/#/demo/d2-crud/demo2) |
| 带边框表格 | [点我查看](https://fairyever.gitee.io//d2-admin-preview/#/demo/d2-crud/demo3) |
| 基础表格 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo1) |
| 带斑马纹表格 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo2) |
| 带边框表格 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo3) |
| 带状态表格 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo4) |
| 固定表头 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo5) |

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

@ -7,6 +7,7 @@ export default {
{ path: `${pre}demo1`, title: '基础表格' },
{ path: `${pre}demo2`, title: '带斑马纹表格' },
{ path: `${pre}demo3`, title: '带边框表格' },
{ path: `${pre}demo4`, title: '带状态表格' }
{ path: `${pre}demo4`, title: '带状态表格' },
{ path: `${pre}demo5`, title: '固定表头' }
])('/demo/d2-crud/')
}

73
src/pages/demo/d2-crud/demo5/code.js Normal file
View File

@ -0,0 +1,73 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:options="options"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}
],
options: {
height: '250'
}
}
}
}
</script>`

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

@ -0,0 +1 @@
只要在 `options` 对象中定义了 `height` 属性，即可实现固定表头的表格，而不需要额外的代码。代码如下：

98
src/pages/demo/d2-crud/demo5/index.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<d2-container>
<template slot="header">固定表头</template>
<d2-crud
:columns="columns"
:data="data"
:options="options"/>
<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',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}
],
options: {
height: '250'
}
}
}
}
</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 @@
8b9146b67b3500e79e3547a57199c9c38fa840e1
c6d31f3d245387ef99e06f8e7d1b7a66cd18121d