sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

流体高度

Browse Source 
Former-commit-id: f6112bddaca880e5b25b6d076cb47b2be34d3be2 [formerly f6112bddaca880e5b25b6d076cb47b2be34d3be2 [formerly f6112bddaca880e5b25b6d076cb47b2be34d3be2 [formerly f6112bddaca880e5b25b6d076cb47b2be34d3be2 [formerly 2231a0332db50fc3d5f5419f9728a6840bb86a7f [formerly cd2f56995f18d2ba2dd8c399eb5a7073d1f3c0b2]]]]]
Former-commit-id: 764220cbe5dd9e4dea51c996bc4a7b08054f85fa
Former-commit-id: da012d6e7f77fd67a2e88553cc810d6004fdbe95
Former-commit-id: e8edfd08b47e9f89017fa7ed4f33fa547c8a5815 [formerly 4e5a04247323aa39f49e1c762af2e0207ab16f96]
Former-commit-id: e5a31fe57620c22c383134ee60dfd2204b022ad2
Former-commit-id: e0587df703027d63f9a1aaaabf947c6d3d46e9e7
Former-commit-id: 2976f4e2074104ca4e60697a3980cc105f8cce05
Former-commit-id: 198dbc73b4fd9f76fd5f119fb33880e507ff80fd
Former-commit-id: bb6f045e56fd0cf30fa661ac1e68faed18b85600
This commit is contained in:
孙昊翔
2018-08-27 15:29:00 +08:00
parent b3619cae59
commit d0ce6dfbda
5 changed files with 253 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,7 @@ export default {
{ path: `${pre}demo3`, title: '带边框表格' }, { path: `${pre}demo3`, title: '带边框表格' },
{ 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: '流体高度' }
])('/demo/d2-crud/') ])('/demo/d2-crud/')
} }

112
src/pages/demo/d2-crud/demo7/code.js Normal file
View File

@@ -0,0 +1,112 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:options="options"
:rowHandle="rowHandle"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '省份',
key: 'province'
},
{
title: '市区',
key: 'city'
},
{
title: '地址',
key: 'address',
width: '300'
},
{
title: '邮编',
key: 'zip'
}
],
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
}
],
options: {
maxHeight: '250'
},
rowHandle: {
remove: {
size: 'mini',
confirm: false
}
}
}
}
}
</script>`

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

@@ -0,0 +1 @@
通过在 `options` 对象设置 `maxHeight` 属性为 `D2 Crud` 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。代码如下：

137
src/pages/demo/d2-crud/demo7/index.vue Normal file
View File

@@ -0,0 +1,137 @@
<template>
<d2-container>
<template slot="header">流体高度</template>
<d2-crud
:columns="columns"
:data="data"
:options="options"
:rowHandle="rowHandle"/>
<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: '姓名',
key: 'name'
},
{
title: '省份',
key: 'province'
},
{
title: '市区',
key: 'city'
},
{
title: '地址',
key: 'address',
width: '300'
},
{
title: '邮编',
key: 'zip'
}
],
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
}
],
options: {
maxHeight: '250'
},
rowHandle: {
remove: {
size: 'mini',
confirm: false
}
}
}
}
}
</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 @@
acdde45a330bcab093eb4d812dc4966c000537f1 be070eaabb8ab1511f21970333d6d65ecf391e10