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: 9580078744e0754596b1fd6033b8f629bafc7586 [formerly 9580078744e0754596b1fd6033b8f629bafc7586 [formerly 9580078744e0754596b1fd6033b8f629bafc7586 [formerly 9580078744e0754596b1fd6033b8f629bafc7586 [formerly fe9bf4599ffb224a6983b1cc4434e6c484b4aaa8 [formerly d52c371ee5984497d6809af06233ab6943f03806]]]]]
Former-commit-id: b36975c128f03f42e521e4b52f2ab0ec74d59d92
Former-commit-id: 0cf7a415bfc607d50498df9493dca7e9f06e40d8
Former-commit-id: 9ef0b33daa0298a5c8139c9929dcd711e3930a12 [formerly 19aab21ccb172f8eabc8213773af1568b544b02d]
Former-commit-id: 5fd16510be907a6ad52fe17f19f4b300eb36ec9f
Former-commit-id: 49627931456a9a76b3cc60ff51737af1359c5b76
Former-commit-id: a8086c569b6372ad64d7c5218193a7866d4aad9d
Former-commit-id: 9913f1ff9966abe7df7c12d18019afdc2db1ac03
Former-commit-id: 7d8d50c492d0a008d3a041e323aac2746bfc08e1
This commit is contained in:
孙昊翔
2018-08-27 15:03:21 +08:00
parent f1379e707d
commit b3619cae59
6 changed files with 196 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,3 +7,4 @@
| 带边框表格 | [点我查看](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) |
| 固定列 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo6) |

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

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

83
src/pages/demo/d2-crud/demo6/code.js Normal file
View File

@@ -0,0 +1,83 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date',
width: '180',
fixed: true
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '省份',
key: 'province',
width: '300'
},
{
title: '市区',
key: 'city',
width: '300'
},
{
title: '地址',
key: 'address',
width: '300'
},
{
title: '邮编',
key: 'zip',
fixed: 'right'
}
],
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
}
]
}
}
}
</script>`

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

@@ -0,0 +1 @@
固定列需要在 `columns` 对象数组中给需要固定的列传入 `fixed` 属性，它接受 `Boolean` 值或者 `left` `right` ，表示左边固定还是右边固定。代码如下：

108
src/pages/demo/d2-crud/demo6/index.vue Normal file
View File

@@ -0,0 +1,108 @@
<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',
width: '180',
fixed: true
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '省份',
key: 'province',
width: '300'
},
{
title: '市区',
key: 'city',
width: '300'
},
{
title: '地址',
key: 'address',
width: '300'
},
{
title: '邮编',
key: 'zip',
fixed: 'right'
}
],
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
}
]
}
}
}
</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 @@
c6d31f3d245387ef99e06f8e7d1b7a66cd18121d
acdde45a330bcab093eb4d812dc4966c000537f1