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: aedacbb884050bcbeba78dd93d47d8c02d569ca1 [formerly aedacbb884050bcbeba78dd93d47d8c02d569ca1 [formerly aedacbb884050bcbeba78dd93d47d8c02d569ca1 [formerly aedacbb884050bcbeba78dd93d47d8c02d569ca1 [formerly ce8ae5380804ac0d94aea1f143abd516b13919d5 [formerly 6a53e667ed4edda557ff526b3d9d35515ccd4483]]]]]
Former-commit-id: 5a8675d99ef0308aac368cc28d8a3aca90d610c6
Former-commit-id: d22b37bc78dc3eeac87946bb9607987c7cf23dc5
Former-commit-id: fc72d7367b05034cf21eac251c962242e0427306 [formerly 907af2041fe52543e30f08fc23499e92ade73ccb]
Former-commit-id: 5a72d7ba890bcb341e77695610bab39e3e630335
Former-commit-id: 8204a10ee32924f1a5ac6d294d46a089cf5b7d3a
Former-commit-id: 52a4ee4ef3a6d5b007195fcbe8a9361c9dd6cce9
Former-commit-id: b36beb64839ecbd2ac7dcf47d3f0f98c9649faa1
Former-commit-id: f28040967965e0354bb0c42c417ed8c4e0557d69
This commit is contained in:
孙昊翔
2018-08-27 14:09:31 +08:00
parent 7db9276401
commit c5121512c0
11 changed files with 181 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1 @@
在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，可以在 `columns` 对象中传入 `width` 属性来控制列宽。代码如下：

6
src/pages/demo/d2-crud/demo1/index.vue
View File

@@ -5,9 +5,7 @@
:columns="columns"
:data="data"/>
<el-card shadow="never" class="d2-mb">
<p>
在d2-crud元素中注入columns和data对象数组，即可创建一个最基础的表格，可以在columns对象中传入width属性来控制列宽。代码如下：
</p>
<d2-markdown :source="doc"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<d2-highlight :code="code"/>
@@ -19,11 +17,13 @@
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
doc,
code,
columns: [
{

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

@@ -0,0 +1 @@
`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：

6
src/pages/demo/d2-crud/demo2/index.vue
View File

@@ -6,9 +6,7 @@
:data="data"
:options="options"/>
<el-card shadow="never" class="d2-mb">
<p>
options对象可以对表格进行配置，其中stripe属性可以创建带斑马纹的表格。它接受一个Boolean，设置为true即为启用。代码如下：
</p>
<d2-markdown :source="doc"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<d2-highlight :code="code"/>
@@ -20,11 +18,13 @@
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
doc,
code,
columns: [
{

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

@@ -0,0 +1 @@
默认情况下， `D2 Crud` 是不具有竖直方向的边框的，如果需要，可以在 `options` 对象中传入一个 `border` 属性，它接受一个 `Boolean` ，设置为 `true` 即可启用。代码如下：

6
src/pages/demo/d2-crud/demo3/index.vue
View File

@@ -6,9 +6,7 @@
:data="data"
:options="options"/>
<el-card shadow="never" class="d2-mb">
<p>
默认情况下，D2-Crud是不具有竖直方向的边框的，如果需要，可以在options对象中传入一个border属性，它接受一个Boolean，设置为true即可启用。代码如下：
</p>
<d2-markdown :source="doc"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<d2-highlight :code="code"/>
@@ -20,11 +18,13 @@
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
doc,
code,
columns: [
{

75
src/pages/demo/d2-crud/demo4/code.js Normal file
View File

@@ -0,0 +1,75 @@
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-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
options: {
rowClassName ({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row'
} else if (rowIndex === 3) {
return 'success-row'
}
return ''
}
}
}
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>`

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

@@ -0,0 +1 @@
可以通过指定 `D2 Crud` 组件 `options` 对象中的 `rowClassName` 属性来为 `D2 Crud` 中的某一行添加 `class` ，表明该行处于某种状态。代码如下：

90
src/pages/demo/d2-crud/demo4/index.vue Normal file
View File

@@ -0,0 +1,90 @@
<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-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
options: {
rowClassName ({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row'
} else if (rowIndex === 3) {
return 'success-row'
}
return ''
}
}
}
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>