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: 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
Download Patch File Download Diff File Expand all files Collapse all files

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>