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

文件夹改名

Browse Source 
Former-commit-id: 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 1e795e1614aaf94f23ad99354f6ca9be303a1b1e [formerly 9ce21aef6b043d8bfcb2849dd7c6bc34e4625387]]]]]
Former-commit-id: c92d7410adc4138c7903c0067860fc3d190f54b0
Former-commit-id: 9f0ab819a505e341a6edf210efb107df8b8efe33
Former-commit-id: 3006c0d2ccda4133203372c30ffee34a73fa8944 [formerly f340ca4127e4578b3c53747d13bbaba223ed4e83]
Former-commit-id: 9624c2aaa99880b5e37f1e60f1f36ac673e021ed
Former-commit-id: 7923489f2c3c637782d9d4a1707bc48dfe3b1acf
Former-commit-id: 2375e080a7f715bc48da40d4c56235efad3f0d5d
Former-commit-id: c41402e6c0266a07e974efad41feed7c6fb7d0b6
Former-commit-id: b8814b31619151361c91ed37cb1ee7f3813853c1
This commit is contained in:
liyang
2019-03-14 20:24:45 +08:00
parent 0de79b3462
commit 0f04615685
338 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/demo/d2-crud/demo1/code.js Normal file
View File

@@ -0,0 +1,58 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"/>
</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 弄'
}
]
}
},
mounted () {
console.log(this.$refs.d2Crud.d2CrudData)
}
}
</script>`

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

@@ -0,0 +1 @@
在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，`columns` 中的 `key` 需要与 `data` 中对象的key严格对照，可以在 `columns` 对象中传入 `width` 属性来控制列宽。当表格中的数据通过操作变化时，可以通过 `this.$refs.d2Crud.d2CrudData` 拿到变化后的表格数据。代码如下：

74
src/views/demo/d2-crud/demo1/index.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<d2-container :filename="filename">
<template slot="header">基础表格</template>
<d2-crud
ref="d2Crud"
: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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
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 弄'
}
]
}
},
mounted () {
console.log(this.$refs.d2Crud.d2CrudData)
}
}
</script>

59
src/views/demo/d2-crud/demo10/code.js Normal file
View File

@@ -0,0 +1,59 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
selection-row
@selection-change="handleSelectionChange"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
]
}
},
methods: {
handleSelectionChange (selection) {
console.log(selection)
}
}
}
</script>`

1
src/views/demo/d2-crud/demo10/doc.md Normal file
View File

@@ -0,0 +1 @@
`D2 Crud` 组件提供了多选的支持，只需要配置 `selection-row` 属性即可实现多选。之后由 `selection-change` 事件来管理选择项发生变化时触发的事件，它会传入 `selection` 。代码如下：

76
src/views/demo/d2-crud/demo10/index.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<d2-container :filename="filename">
<template slot="header">多选</template>
<d2-crud
:columns="columns"
:data="data"
selection-row
@selection-change="handleSelectionChange">
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
]
}
},
methods: {
handleSelectionChange (selection) {
console.log(selection)
}
}
}
</script>

60
src/views/demo/d2-crud/demo11/code.js Normal file
View File

@@ -0,0 +1,60 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:options="options"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date',
sortable: true
},
{
title: '姓名',
key: 'name'
},
{
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: {
defaultSort: {
prop: 'date',
order: 'descending'
}
}
}
}
}
</script>`

1
src/views/demo/d2-crud/demo11/doc.md Normal file
View File

@@ -0,0 +1 @@
在 `columns` 中设置 `sortable` 属性为 `true` ，即可实现以该列为基准的排序。可以通过 `options` 的 `defaultSort` 属性设置默认的排序列和排序顺序。代码如下：

77
src/views/demo/d2-crud/demo11/index.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<d2-container :filename="filename">
<template slot="header">排序</template>
<d2-crud
:columns="columns"
:data="data"
:options="options">
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date',
sortable: true
},
{
title: '姓名',
key: 'name'
},
{
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: {
defaultSort: {
prop: 'date',
order: 'descending'
}
}
}
}
}
</script>

68
src/views/demo/d2-crud/demo12/code.js Normal file
View File

@@ -0,0 +1,68 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
},
{
title: '标签',
key: 'tag',
filters: [
{ text: '家', value: '家' },
{ text: '公司', value: '公司' }
],
filterMethod (value, row) {
return row.tag === value
},
filterPlacement: 'bottom-end'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
tag: '家'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
tag: '公司'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
tag: '家'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
tag: '公司'
}
]
}
}
}
</script>`

1
src/views/demo/d2-crud/demo12/doc.md Normal file
View File

@@ -0,0 +1 @@
在 `columns` 中设置 `filters` `filterMethod` 属性即可开启该列的筛选，`filters` 是一个数组， `filterMethod` 是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。代码如下：

85
src/views/demo/d2-crud/demo12/index.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<d2-container :filename="filename">
<template slot="header">筛选</template>
<d2-crud
:columns="columns"
:data="data">
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
},
{
title: '标签',
key: 'tag',
filters: [
{ text: '家', value: '家' },
{ text: '公司', value: '公司' }
],
filterMethod (value, row) {
return row.tag === value
},
filterPlacement: 'bottom-end'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
tag: '家'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
tag: '公司'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
tag: '家'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
tag: '公司'
}
]
}
}
}
</script>

105
src/views/demo/d2-crud/demo13/code.js Normal file
View File

@@ -0,0 +1,105 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:options="options"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: 'ID',
key: 'id'
},
{
title: '姓名',
key: 'name'
},
{
title: '数值 1',
key: 'amount1'
},
{
title: '数值 2',
key: 'amount2'
},
{
title: '数值 3',
key: 'amount3'
}
],
data: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
],
options: {
showSummary: true,
summaryMethod (param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价'
return
}
const values = data.map(item => Number(item[column.property]))
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
sums[index] += ' 元'
} else {
sums[index] = 'N/A'
}
})
return sums
}
}
}
}
}
</script>`

1
src/views/demo/d2-crud/demo13/doc.md Normal file
View File

@@ -0,0 +1 @@
将 `options` 中的 `showSummary` 设置为 `true` 就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 `sumText` 配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 `summaryMethod` 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。代码如下：

122
src/views/demo/d2-crud/demo13/index.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<d2-container :filename="filename">
<template slot="header">表尾合计行</template>
<d2-crud
:columns="columns"
:data="data"
:options="options">
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: 'ID',
key: 'id'
},
{
title: '姓名',
key: 'name'
},
{
title: '数值 1',
key: 'amount1'
},
{
title: '数值 2',
key: 'amount2'
},
{
title: '数值 3',
key: 'amount3'
}
],
data: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
],
options: {
showSummary: true,
summaryMethod (param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价'
return
}
const values = data.map(item => Number(item[column.property]))
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
sums[index] += ' 元'
} else {
sums[index] = 'N/A'
}
})
return sums
}
}
}
}
}
</script>

88
src/views/demo/d2-crud/demo14/code.js Normal file
View File

@@ -0,0 +1,88 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:options="options"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: 'ID',
key: 'id'
},
{
title: '姓名',
key: 'name'
},
{
title: '数值 1',
key: 'amount1'
},
{
title: '数值 2',
key: 'amount2'
},
{
title: '数值 3',
key: 'amount3'
}
],
data: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
],
options: {
border: true,
spanMethod ({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2]
} else if (columnIndex === 1) {
return [0, 0]
}
}
}
}
}
}
}
</script>`

1
src/views/demo/d2-crud/demo14/doc.md Normal file
View File

@@ -0,0 +1 @@
通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 `rowspan` ，第二个元素代表 `colspan` 。代码如下：

105
src/views/demo/d2-crud/demo14/index.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<d2-container :filename="filename">
<template slot="header">合并行</template>
<d2-crud
:columns="columns"
:data="data"
:options="options">
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: 'ID',
key: 'id'
},
{
title: '姓名',
key: 'name'
},
{
title: '数值 1',
key: 'amount1'
},
{
title: '数值 2',
key: 'amount2'
},
{
title: '数值 3',
key: 'amount3'
}
],
data: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
],
options: {
border: true,
spanMethod ({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2]
} else if (columnIndex === 1) {
return [0, 0]
}
}
}
}
}
}
}
</script>

94
src/views/demo/d2-crud/demo15/code.js Normal file
View File

@@ -0,0 +1,94 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:options="options"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: 'ID',
key: 'id'
},
{
title: '姓名',
key: 'name'
},
{
title: '数值 1',
key: 'amount1'
},
{
title: '数值 2',
key: 'amount2'
},
{
title: '数值 3',
key: 'amount3'
}
],
data: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
],
options: {
border: true,
spanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
}
}
</script>`

1
src/views/demo/d2-crud/demo15/doc.md Normal file
View File

@@ -0,0 +1 @@
通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个键名为 `rowspan` 和 `colspan` 的对象。代码如下：

111
src/views/demo/d2-crud/demo15/index.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<d2-container :filename="filename">
<template slot="header">合并列</template>
<d2-crud
:columns="columns"
:data="data"
:options="options">
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: 'ID',
key: 'id'
},
{
title: '姓名',
key: 'name'
},
{
title: '数值 1',
key: 'amount1'
},
{
title: '数值 2',
key: 'amount2'
},
{
title: '数值 3',
key: 'amount3'
}
],
data: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
],
options: {
border: true,
spanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
}
}
</script>

138
src/views/demo/d2-crud/demo16/code.js Normal file
View File

@@ -0,0 +1,138 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
add-title="我的新增"
:add-template="addTemplate"
:form-options="formOptions"
@dialog-open="handleDialogOpen"
@row-add="handleRowAdd"
@dialog-cancel="handleDialogCancel">
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="addRowWithNewTemplate">使用自定义模板新增</el-button>
</d2-crud>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
addTemplate: {
date: {
title: '日期',
value: '2016-05-05'
},
name: {
title: '姓名',
value: '王小虎'
},
address: {
title: '地址',
value: '上海市普陀区金沙江路 1520 弄'
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleDialogOpen ({ mode }) {
this.$message({
message: '打开模态框，模式为：' + mode,
type: 'success'
})
},
// 普通的新增
addRow () {
this.$refs.d2Crud.showDialog({
mode: 'add'
})
},
// 传入自定义模板的新增
addRowWithNewTemplate () {
this.$refs.d2Crud.showDialog({
mode: 'add',
template: {
name: {
title: '姓名',
value: ''
},
value1: {
title: '新属性1',
value: ''
},
value2: {
title: '新属性2',
value: ''
}
}
})
},
handleRowAdd (row, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(row)
this.$message({
message: '保存成功',
type: 'success'
});
// done可以传入一个对象来修改提交的某个字段
done({
address: '我是通过done事件传入的数据！'
})
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消保存',
type: 'warning'
});
done()
}
}
}
</script>`

1
src/views/demo/d2-crud/demo16/doc.md Normal file
View File

@@ -0,0 +1 @@
通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'add'`属性，可开启新增模式，需要定义 `add-template` 来为新增的表单添加模板，也可以向 `showDialog` 中传入 `template`对象来灵活定义新的模板，定义 `add-title` 来修改新增模态框的标题，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：

150
src/views/demo/d2-crud/demo16/index.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<d2-container :filename="filename">
<template slot="header">新增数据</template>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
add-title="我的新增"
:add-template="addTemplate"
:form-options="formOptions"
@dialog-open="handleDialogOpen"
@row-add="handleRowAdd"
@dialog-cancel="handleDialogCancel">
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="addRowWithNewTemplate">使用自定义模板新增</el-button>
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
addTemplate: {
date: {
title: '日期',
value: '2016-05-05'
},
name: {
title: '姓名',
value: '王小虎'
},
address: {
title: '地址',
value: '上海市普陀区金沙江路 1520 弄'
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleDialogOpen ({ mode }) {
this.$message({
message: '打开模态框，模式为：' + mode,
type: 'success'
})
},
addRow () {
this.$refs.d2Crud.showDialog({
mode: 'add'
})
},
addRowWithNewTemplate () {
this.$refs.d2Crud.showDialog({
mode: 'add',
template: {
name: {
title: '姓名',
value: ''
},
value1: {
title: '新属性1',
value: ''
},
value2: {
title: '新属性2',
value: ''
}
}
})
},
handleRowAdd (row, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(row)
this.$message({
message: '保存成功',
type: 'success'
})
done({
address: '我是通过done事件传入的数据！'
})
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消保存',
type: 'warning'
})
done()
}
}
}
</script>

171
src/views/demo/d2-crud/demo17/code.js Normal file
View File

@@ -0,0 +1,171 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:rowHandle="rowHandle"
edit-title="我的修改"
:edit-template="editTemplate"
:form-options="formOptions"
@dialog-open="handleDialogOpen"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel">
<el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
</d2-crud>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
forbidEdit: true,
showEditButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
forbidEdit: false,
showEditButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
}
],
rowHandle: {
columnHeader: '编辑表格',
edit: {
icon: 'el-icon-edit',
text: '点我进行编辑',
size: 'small',
show (index, row) {
if (row.showEditButton) {
return true
}
return false
},
disabled (index, row) {
if (row.forbidEdit) {
return true
}
return false
}
}
},
editTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
},
forbidEdit: {
title: '禁用按钮',
value: false,
component: {
show: false
}
},
showEditButton: {
title: '显示按钮',
value: true,
component: {
show: false
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleDialogOpen ({ mode, row }) {
this.$message({
message: '打开模态框，模式为：' + mode,
type: 'success'
})
},
editRowWithNewTemplate () {
this.$refs.d2Crud.showDialog({
mode: "edit",
rowIndex: 2,
template: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
}
}
})
},
handleRowEdit ({ index, row }, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '编辑成功',
type: 'success'
})
// done可以传入一个对象来修改提交的某个字段
done({
address: '我是通过done事件传入的数据！'
})
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消编辑',
type: 'warning'
})
done()
}
}
}
</script>`

1
src/views/demo/d2-crud/demo17/doc.md Normal file
View File

@@ -0,0 +1 @@
通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `edit-template` 来为编辑添加模板，通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'edit'` 、`rowIndex` 属性和 `template`对象，可使用自定义模板编辑指定行，定义 `edit-title` 来修改编辑模态框的标题，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消编辑，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：

185
src/views/demo/d2-crud/demo17/index.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<d2-container :filename="filename">
<template slot="header">修改数据</template>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:rowHandle="rowHandle"
edit-title="我的修改"
:edit-template="editTemplate"
:form-options="formOptions"
@dialog-open="handleDialogOpen"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel">
<el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
forbidEdit: true,
showEditButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
forbidEdit: false,
showEditButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
}
],
rowHandle: {
columnHeader: '编辑表格',
edit: {
icon: 'el-icon-edit',
text: '点我进行编辑',
size: 'small',
show (index, row) {
if (row.showEditButton) {
return true
}
return false
},
disabled (index, row) {
if (row.forbidEdit) {
return true
}
return false
}
}
},
editTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
},
forbidEdit: {
title: '禁用按钮',
value: false,
component: {
show: false
}
},
showEditButton: {
title: '显示按钮',
value: true,
component: {
show: false
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleDialogOpen ({ mode, row }) {
this.$message({
message: '打开模态框，模式为：' + mode,
type: 'success'
})
},
editRowWithNewTemplate () {
this.$refs.d2Crud.showDialog({
mode: 'edit',
rowIndex: 2,
template: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
}
}
})
},
handleRowEdit ({ index, row }, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '编辑成功',
type: 'success'
})
done({
address: '我是通过done事件传入的数据！'
})
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消编辑',
type: 'warning'
})
done()
}
}
}
</script>

95
src/views/demo/d2-crud/demo18/code.js Normal file
View File

@@ -0,0 +1,95 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:rowHandle="rowHandle"
@row-remove="handleRowRemove"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
forbidRemove: true,
showRemoveButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
forbidRemove: false,
showRemoveButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
forbidRemove: false,
showRemoveButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidRemove: false,
showRemoveButton: true
}
],
rowHandle: {
remove: {
icon: 'el-icon-delete',
size: 'small',
fixed: 'right',
confirm: true,
show (index, row) {
if (row.showRemoveButton) {
return true
}
return false
},
disabled (index, row) {
if (row.forbidRemove) {
return true
}
return false
}
}
}
}
},
methods: {
handleRowRemove ({ index, row }, done) {
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '删除成功',
type: 'success'
})
done()
}, 300)
}
}
}
</script>`

1
src/views/demo/d2-crud/demo18/doc.md Normal file
View File

@@ -0,0 +1 @@
通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `remove` 对象可以开启删除模式，`confirm` 属性的值为 `Boolean` 类型，控制删除前是否弹出confirm框进行提示， `row-remove` 事件控制数据删除，参数： `index` 是当前删除行的索引， `row` 是当前删除行的数据， `done` 用于控制删除成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：

112
src/views/demo/d2-crud/demo18/index.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<d2-container :filename="filename">
<template slot="header">删除数据</template>
<d2-crud
:columns="columns"
:data="data"
:rowHandle="rowHandle"
@row-remove="handleRowRemove">
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
forbidRemove: true,
showRemoveButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
forbidRemove: false,
showRemoveButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
forbidRemove: false,
showRemoveButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidRemove: false,
showRemoveButton: true
}
],
rowHandle: {
remove: {
icon: 'el-icon-delete',
size: 'small',
fixed: 'right',
confirm: true,
show (index, row) {
if (row.showRemoveButton) {
return true
}
return false
},
disabled (index, row) {
if (row.forbidRemove) {
return true
}
return false
}
}
}
}
},
methods: {
handleRowRemove ({ index, row }, done) {
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '删除成功',
type: 'success'
})
done()
}, 300)
}
}
}
</script>

70
src/views/demo/d2-crud/demo19/code.js Normal file
View File

@@ -0,0 +1,70 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:rowHandle="rowHandle"
@custom-emit-1="handleCustomEvent"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
rowHandle: {
custom: [
{
text: '自定义按钮',
type: 'warning',
size: 'small',
emit: 'custom-emit-1'
}
]
}
}
},
methods: {
handleCustomEvent ({index, row}) {
console.log(index)
console.log(row)
}
}
}
</script>`

1
src/views/demo/d2-crud/demo19/doc.md Normal file
View File

@@ -0,0 +1 @@
通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `custom` 数组对象可以自定义模式，数组中每一个对象定义一个自定义按钮，对象属性支持所有的 `el-button` 属性， `emit` 属性定义了监听的事件，例如 `emit` 的值为 `custom-emit-1`，就在 `D2 Crud` 中监听 `custom-emit-1` 事件 监听的事件参数： `index` 是当前行的索引， `row` 是当前行的数据。代码如下：

87
src/views/demo/d2-crud/demo19/index.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<d2-container :filename="filename">
<template slot="header">自定义操作列</template>
<d2-crud
:columns="columns"
:data="data"
:rowHandle="rowHandle"
@custom-emit-1="handleCustomEvent">
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
rowHandle: {
custom: [
{
text: '自定义按钮',
type: 'warning',
size: 'small',
emit: 'custom-emit-1'
}
]
}
}
},
methods: {
handleCustomEvent ({ index, row }) {
console.log(index)
console.log(row)
}
}
}
</script>

58
src/views/demo/d2-crud/demo2/code.js Normal file
View File

@@ -0,0 +1,58 @@
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: {
stripe: true
}
}
}
}
</script>`

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

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

74
src/views/demo/d2-crud/demo2/index.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<d2-container :filename="filename">
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
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: {
stripe: true
}
}
}
}
</script>

132
src/views/demo/d2-crud/demo20/code.js Normal file
View File

@@ -0,0 +1,132 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:edit-template="editTemplate"
:form-options="formOptions"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
rowHandle: {
edit: {
icon: 'el-icon-edit',
text: '点我查看表单组件渲染',
size: 'small',
fixed: 'right'
}
},
editTemplate: {
date: {
title: '日期',
value: '',
component: {
name: 'el-date-picker',
span: 12
}
},
name: {
title: '姓名',
value: '',
component: {
name: 'el-select',
options: [
{
value: '王小虎',
label: '王小虎'
},
{
value: '王中虎',
label: '王中虎'
},
{
value: '王老虎',
label: '王老虎'
}
],
span: 12
}
},
address: {
title: '地址',
value: '',
component: {
span: 18
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false,
gutter: 20
}
}
},
methods: {
handleRowEdit ({ index, row }, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '编辑成功',
type: 'success'
})
done()
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消编辑',
type: 'warning'
})
done()
}
}
}
</script>`

1
src/views/demo/d2-crud/demo20/doc.md Normal file
View File

@@ -0,0 +1 @@
向 `add-template` 或 `edit-template` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收一个参数 `h`，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：

149
src/views/demo/d2-crud/demo20/index.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<d2-container :filename="filename">
<template slot="header">表单组件渲染</template>
<d2-crud
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:edit-template="editTemplate"
:form-options="formOptions"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel">
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
rowHandle: {
edit: {
icon: 'el-icon-edit',
text: '点我查看表单组件渲染',
size: 'small',
fixed: 'right'
}
},
editTemplate: {
date: {
title: '日期',
value: '',
component: {
name: 'el-date-picker',
span: 12
}
},
name: {
title: '姓名',
value: '',
component: {
name: 'el-select',
options: [
{
value: '王小虎',
label: '王小虎'
},
{
value: '王中虎',
label: '王中虎'
},
{
value: '王老虎',
label: '王老虎'
}
],
span: 12
}
},
address: {
title: '地址',
value: '',
component: {
span: 18
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false,
gutter: 20
}
}
},
methods: {
handleRowEdit ({ index, row }, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '编辑成功',
type: 'success'
})
done()
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消编辑',
type: 'warning'
})
done()
}
}
}
</script>

116
src/views/demo/d2-crud/demo21/code.js Normal file
View File

@@ -0,0 +1,116 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:edit-template="editTemplate"
:form-options="formOptions"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
rowHandle: {
edit: {
icon: 'el-icon-edit',
text: '点我查看表单布局',
size: 'small',
fixed: 'right'
}
},
editTemplate: {
date: {
title: '日期',
value: '',
component: {
span: 12
}
},
name: {
title: '姓名',
value: '',
component: {
span: 12
}
},
address: {
title: '地址',
value: '',
component: {
span: 18
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false,
gutter: 20
}
}
},
methods: {
handleRowEdit ({ index, row }, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '编辑成功',
type: 'success'
})
done()
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消编辑',
type: 'warning'
})
done()
}
}
}
</script>`

1
src/views/demo/d2-crud/demo21/doc.md Normal file
View File

@@ -0,0 +1 @@
向 `form-options` 中传入 `gutter` 属性来控制栅格间隔，向 `add-template` 或 `edit-template` 的 `component` 对象传入 `span` 属性来控制栅格占据的列数。代码如下：

133
src/views/demo/d2-crud/demo21/index.vue Normal file
View File

@@ -0,0 +1,133 @@
<template>
<d2-container :filename="filename">
<template slot="header">表单布局</template>
<d2-crud
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:edit-template="editTemplate"
:form-options="formOptions"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel">
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
rowHandle: {
edit: {
icon: 'el-icon-edit',
text: '点我查看表单布局',
size: 'small',
fixed: 'right'
}
},
editTemplate: {
date: {
title: '日期',
value: '',
component: {
span: 12
}
},
name: {
title: '姓名',
value: '',
component: {
span: 12
}
},
address: {
title: '地址',
value: '',
component: {
span: 18
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false,
gutter: 20
}
}
},
methods: {
handleRowEdit ({ index, row }, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '编辑成功',
type: 'success'
})
done()
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消编辑',
type: 'warning'
})
done()
}
}
}
</script>

115
src/views/demo/d2-crud/demo22/code.js Normal file
View File

@@ -0,0 +1,115 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:add-template="addTemplate"
:form-options="formOptions"
:add-rules="addRules"
@row-add="handleRowAdd"
@dialog-cancel="handleDialogCancel">
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
</d2-crud>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
addButton: {
text: '点我查看表单校验',
icon: 'el-icon-plus',
size: 'small'
},
addTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
},
addRules: {
date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
}
}
},
methods: {
addRow () {
this.$refs.d2Crud.showDialog({
mode: 'add'
})
},
handleRowAdd (row, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(row)
this.$message({
message: '保存成功',
type: 'success'
});
done()
this.formOptions.saveLoading = false
}, 300);
},
handleDialogCancel (done) {
this.$message({
message: '取消保存',
type: 'warning'
});
done()
}
}
}
</script>`

1
src/views/demo/d2-crud/demo22/doc.md Normal file
View File

@@ -0,0 +1 @@
通过给 `D2 Crud` 传入 `add-rules` 或 `edit-rules` 可开启新增/修改表单校验，校验规则参见：[async-validator](https://github.com/yiminghe/async-validator)。代码如下：

131
src/views/demo/d2-crud/demo22/index.vue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<d2-container :filename="filename">
<template slot="header">表单校验</template>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:add-template="addTemplate"
:form-options="formOptions"
:add-rules="addRules"
@row-add="handleRowAdd"
@dialog-cancel="handleDialogCancel">
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
addButton: {
text: '点我查看表单校验',
icon: 'el-icon-plus',
size: 'small'
},
addTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
},
addRules: {
date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
}
}
},
methods: {
addRow () {
this.$refs.d2Crud.showDialog({
mode: 'add'
})
},
handleRowAdd (row, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(row)
this.$message({
message: '保存成功',
type: 'success'
})
done()
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消保存',
type: 'warning'
})
done()
}
}
}
</script>

87
src/views/demo/d2-crud/demo23/code.js Normal file
View File

@@ -0,0 +1,87 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
@cell-data-change="handleCellDataChange"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date',
component: {
name: 'el-date-picker',
size: 'small'
}
},
{
title: '姓名',
key: 'name',
component: {
name: 'el-select',
options: [
{
value: '王小虎',
label: '王小虎'
},
{
value: '王中虎',
label: '王中虎'
},
{
value: '王老虎',
label: '王老虎'
}
],
size: 'small'
}
},
{
title: '地址',
key: 'address',
component: {
name: 'el-input',
size: 'small'
}
}
],
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 弄'
}
]
}
},
methods: {
handleCellDataChange ({ rowIndex, key, value, row }) {
console.log(rowIndex)
console.log(key)
console.log(value)
console.log(row)
}
}
}
</script>`

1
src/views/demo/d2-crud/demo23/doc.md Normal file
View File

@@ -0,0 +1 @@
向 `columns` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收两个参数： `h`是render函数的固定参数， `scope` 是单元格中的数据，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。通过 `cell-data-change`事件可以监听单元格内的数据变化，监听在crud内部是通过change事件触发的（这意味着input类组件失去焦点才会触发事件，单纯输入不会触发），接收一个对象参数 `{rowIndex, key, value, row}`， `rowIndex` 为改变所在行，`key` 为改变的字段，`value` 为改变后的值，`row` 是改变所在行的所有数据。代码如下：

103
src/views/demo/d2-crud/demo23/index.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<d2-container :filename="filename">
<template slot="header">表格内编辑</template>
<d2-crud
:columns="columns"
:data="data"
@cell-data-change="handleCellDataChange"/>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date',
component: {
name: 'el-date-picker',
size: 'small'
}
},
{
title: '姓名',
key: 'name',
component: {
name: 'el-select',
options: [
{
value: '王小虎',
label: '王小虎'
},
{
value: '王中虎',
label: '王中虎'
},
{
value: '王老虎',
label: '王老虎'
}
],
size: 'small'
}
},
{
title: '地址',
key: 'address',
component: {
name: 'el-input',
size: 'small'
}
}
],
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 弄'
}
]
}
},
methods: {
handleCellDataChange ({ rowIndex, key, value, row }) {
console.log(rowIndex)
console.log(key)
console.log(value)
console.log(row)
}
}
}
</script>

62
src/views/demo/d2-crud/demo24/code.js Normal file
View File

@@ -0,0 +1,62 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data">
<el-input slot="header" placeholder="请输入内容" style="margin-bottom: 5px">
<template slot="prepend">Http://</template>
<template slot="append">.com</template>
</el-input>
<el-button slot="header" style="margin-bottom: 5px">自定义按钮1</el-button>
<el-button slot="header" type="primary" round style="margin-bottom: 5px">自定义按钮2</el-button>
</d2-crud>
</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 弄'
}
]
}
}
}
</script>`

1
src/views/demo/d2-crud/demo24/doc.md Normal file
View File

@@ -0,0 +1 @@
`header` slot 可以在表头添加自定义内容。代码如下：

75
src/views/demo/d2-crud/demo24/index.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<d2-container :filename="filename">
<template slot="header">表格slot</template>
<d2-crud ref="d2Crud" :columns="columns" :data="data">
<el-input slot="header" placeholder="请输入内容" style="margin-bottom: 5px">
<template slot="prepend">Http://</template>
<template slot="append">.com</template>
</el-input>
<el-button slot="header" style="margin-bottom: 5px">自定义按钮1</el-button>
<el-button slot="header" type="primary" round style="margin-bottom: 5px">自定义按钮2</el-button>
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
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 弄'
}
]
}
}
}
</script>

44
src/views/demo/d2-crud/demo25/MyTag.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div style="cursor: pointer">
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
require: true
},
scope: {
default: null
},
myProps: {
default: null
}
},
computed: {
type () {
return this.value ? 'success' : 'danger'
},
text () {
if (this.scope.$index === 1) {
return this.myProps
} else if (this.scope.$index === 3) {
return '通过scope拿到了当前行日期：' + this.scope.row.date
}
return this.value ? '是' : '否'
}
},
mounted () {
console.log(this.scope)
console.log(this.myProps)
},
methods: {
handleClick () {
this.$emit('input', !this.value)
}
}
}
</script>

46
src/views/demo/d2-crud/demo25/codeComponent.js Normal file
View File

@@ -0,0 +1,46 @@
export default `<template>
<div style="cursor: pointer">
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
require: true
},
// 本行的所有数据，此字段不需要额外配置
scope: {
default: null
},
// 通过 component 中 props 字段传过来的数据，此字段需要先在 component 中配置
myProps: {
default: null
}
},
computed: {
type () {
return this.value ? 'success' : 'danger'
},
text () {
if (this.scope.$index === 1) {
return this.myProps
} else if (this.scope.$index === 3) {
return '通过scope拿到了当前行日期：' + this.scope.row.date
}
return this.value ? '是' : '否'
}
},
mounted () {
console.log(this.scope)
console.log(this.myProps)
},
methods: {
handleClick () {
this.$emit('input', !this.value)
}
}
}
</script>`

75
src/views/demo/d2-crud/demo25/codeOverall.js Normal file
View File

@@ -0,0 +1,75 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
@d2-data-change="handleDataChange"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态（点击可修改）',
key: 'check',
component: {
name: 'my-tag',
props: {
myProps: '我是通过props传过来的数据！'
}
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
]
}
},
methods: {
handleDataChange (data) {
console.log(data)
}
}
}
</script>`

80
src/views/demo/d2-crud/demo25/codePart.js Normal file
View File

@@ -0,0 +1,80 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
@d2-data-change="handleDataChange"/>
</div>
</template>
<script>
import MyTag from './MyTag'
export default {
components: {
MyTag
},
data () {
return {
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态（点击可修改）',
key: 'check',
component: {
name: MyTag,
props: {
myProps: '我是通过props传过来的数据！'
}
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
]
}
},
methods: {
handleDataChange (data) {
console.log(data)
}
}
}
</script>`

1
src/views/demo/d2-crud/demo25/doc.md Normal file
View File

@@ -0,0 +1 @@
向 `columns` 的 `component` 对象的 `name` 传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，可以在 `component` 中传入 `props` 字段，传入的字段可以在自定义组件中通过 `props` 接收，自定义组件还可以通过在 `props` 中定义 `scope` 字段来拿到当前行的所有数据，代码如下：

108
src/views/demo/d2-crud/demo25/index.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<d2-container :filename="filename">
<template slot="header">表格自定义组件</template>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
@d2-data-change="handleDataChange"/>
<el-card shadow="never" class="d2-mb">
<d2-markdown :source="doc"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>全局注册写法：</h4>
<d2-highlight :code="codeOverall"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>局部注册写法：</h4>
<d2-highlight :code="codePart"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>自定义组件 MyTag 代码：</h4>
<d2-highlight :code="codeComponent"/>
</el-card>
<template slot="footer">
<d2-link-btn title="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import codeOverall from './codeOverall.js'
import codePart from './codePart.js'
import codeComponent from './codeComponent.js'
import MyTag from './MyTag'
export default {
components: {
MyTag
},
data () {
return {
filename: __filename,
doc,
codeOverall,
codePart,
codeComponent,
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态（点击可修改）',
key: 'check',
component: {
name: MyTag,
props: {
myProps: '我是通过props传过来的数据！'
}
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
]
}
},
methods: {
handleDataChange (data) {
console.log(data)
}
}
}
</script>

29
src/views/demo/d2-crud/demo26/MyTag.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div style="cursor: pointer">
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
require: true
}
},
computed: {
type () {
return this.value ? 'success' : 'danger'
},
text () {
return this.value ? '是' : '否'
}
},
methods: {
handleClick () {
this.$emit('input', !this.value)
}
}
}
</script>

29
src/views/demo/d2-crud/demo26/codeComponent.js Normal file
View File

@@ -0,0 +1,29 @@
export default `<template>
<div style="cursor: pointer">
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
require: true
}
},
computed: {
type () {
return this.value ? 'success' : 'danger'
},
text () {
return this.value ? '是' : '否'
}
},
methods: {
handleClick () {
this.$emit('input', !this.value)
}
}
}
</script>`

130
src/views/demo/d2-crud/demo26/codeOverall.js Normal file
View File

@@ -0,0 +1,130 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:edit-template="editTemplate"
@d2-data-change="handleDataChange"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态（点击可修改）',
key: 'check',
component: {
name: 'my-tag'
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
],
rowHandle: {
columnHeader: '编辑表格',
edit: {
icon: 'el-icon-edit',
text: '点我编辑自定义表单组件',
size: 'small'
}
},
editTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
},
check: {
title: '检查状态（点击进行修改）',
value: false,
component: {
name: 'my-tag'
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleDataChange (data) {
console.log(data)
},
handleRowEdit ({ index, row }, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '编辑成功',
type: 'success'
})
done()
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消编辑',
type: 'warning'
})
done()
}
}
}
</script>`

135
src/views/demo/d2-crud/demo26/codePart.js Normal file
View File

@@ -0,0 +1,135 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:edit-template="editTemplate"
@d2-data-change="handleDataChange"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel"/>
</div>
</template>
<script>
import MyTag from './MyTag'
export default {
components: {
MyTag
},
data () {
return {
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态（点击可修改）',
key: 'check',
component: {
name: MyTag
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
],
rowHandle: {
columnHeader: '编辑表格',
edit: {
icon: 'el-icon-edit',
text: '点我编辑自定义表单组件',
size: 'small'
}
},
editTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
},
check: {
title: '检查状态（点击进行修改）',
value: false,
component: {
name: MyTag
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleDataChange (data) {
console.log(data)
},
handleRowEdit ({ index, row }, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '编辑成功',
type: 'success'
})
done()
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消编辑',
type: 'warning'
})
done()
}
}
}
</script>`

1
src/views/demo/d2-crud/demo26/doc.md Normal file
View File

@@ -0,0 +1 @@
向 `addTemplate` 或 `editTemplate` 中需要渲染自定义组件的 `component` 对象 `name` 中传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，代码如下：

163
src/views/demo/d2-crud/demo26/index.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<d2-container :filename="filename">
<template slot="header">表单自定义组件</template>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:edit-template="editTemplate"
@d2-data-change="handleDataChange"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel"/>
<el-card shadow="never" class="d2-mb">
<d2-markdown :source="doc"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>全局注册写法：</h4>
<d2-highlight :code="codeOverall"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>局部注册写法：</h4>
<d2-highlight :code="codePart"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>自定义组件 MyTag 代码：</h4>
<d2-highlight :code="codeComponent"/>
</el-card>
<template slot="footer">
<d2-link-btn title="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import codeOverall from './codeOverall.js'
import codePart from './codePart.js'
import codeComponent from './codeComponent.js'
import MyTag from './MyTag'
export default {
components: {
MyTag
},
data () {
return {
filename: __filename,
doc,
codeOverall,
codePart,
codeComponent,
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态（点击可修改）',
key: 'check',
component: {
name: MyTag
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
],
rowHandle: {
columnHeader: '编辑表格',
edit: {
icon: 'el-icon-edit',
text: '点我编辑自定义表单组件',
size: 'small'
}
},
editTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
},
check: {
title: '检查状态（点击进行修改）',
value: false,
component: {
name: MyTag
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleDataChange (data) {
console.log(data)
},
handleRowEdit ({ index, row }, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '编辑成功',
type: 'success'
})
done()
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消编辑',
type: 'warning'
})
done()
}
}
}
</script>

54
src/views/demo/d2-crud/demo27/code.js Normal file
View File

@@ -0,0 +1,54 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:loading="loading"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
loading: true
}
}
}
</script>`

1
src/views/demo/d2-crud/demo27/doc.md Normal file
View File

@@ -0,0 +1 @@
在 `D2 Crud` 组件中传入 `loading` ，即可控制表格加载状态，`loading` 的可选值为 `true` 和 `false`。代码如下：

77
src/views/demo/d2-crud/demo27/index.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<d2-container :filename="filename">
<template slot="header">加载状态</template>
<el-button @click="handleLoading">点我切换加载状态</el-button>
<d2-crud
style="margin-top: 10px"
:columns="columns"
:data="data"
:loading="loading"/>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
loading: true
}
},
methods: {
handleLoading () {
this.loading = !this.loading
}
}
}
</script>

60
src/views/demo/d2-crud/demo28/code.js Normal file
View File

@@ -0,0 +1,60 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:loading="loading"
:loading-options="loadingOptions"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
loading: true,
loadingOptions: {
text: '拼命加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.8)'
}
}
}
}
</script>`

1
src/views/demo/d2-crud/demo28/doc.md Normal file
View File

@@ -0,0 +1 @@
在 `D2 Crud` 组件中传入 `loading-options` ，即可自定义表格加载状态。代码如下：

83
src/views/demo/d2-crud/demo28/index.vue Normal file
View File

@@ -0,0 +1,83 @@
<template>
<d2-container :filename="filename">
<template slot="header">自定义加载状态</template>
<el-button @click="handleLoading">点我切换加载状态</el-button>
<d2-crud
style="margin-top: 10px"
:columns="columns"
:data="data"
:loading="loading"
:loading-options="loadingOptions"/>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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 弄'
}
],
loading: true,
loadingOptions: {
text: '拼命加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.8)'
}
}
},
methods: {
handleLoading () {
this.loading = !this.loading
}
}
}
</script>

73
src/views/demo/d2-crud/demo29/code.js Normal file
View File

@@ -0,0 +1,73 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:loading="loading"
:pagination="pagination"
@pagination-current-change="paginationCurrentChange"/>
</div>
</template>
<script>
import { BusinessTable1List } from '@api/demo.business.table.1'
export default {
data () {
return {
columns: [
{
title: '卡密',
key: 'key',
width: 320
},
{
title: '面值',
key: 'value'
},
{
title: '管理员',
key: 'admin'
},
{
title: '创建时间',
key: 'dateTimeCreat'
},
{
title: '使用时间',
key: 'dateTimeUse'
}
],
data: [],
loading: false,
pagination: {
currentPage: 1,
pageSize: 5,
total: 0
}
}
},
mounted () {
this.fetchData()
},
methods: {
paginationCurrentChange (currentPage) {
this.pagination.currentPage = currentPage
this.fetchData()
},
fetchData () {
this.loading = true
BusinessTable1List({
...this.pagination
}).then(res => {
this.data = res.list
this.pagination.total = res.page.total
this.loading = false
}).catch(err => {
console.log('err', err)
this.loading = false
})
}
}
}
</script>`

1
src/views/demo/d2-crud/demo29/doc.md Normal file
View File

@@ -0,0 +1 @@
在 `D2 Crud` 组件中传入 `pagination` 对象，即可开启分页。代码如下：

88
src/views/demo/d2-crud/demo29/index.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<d2-container :filename="filename">
<template slot="header">分页</template>
<d2-crud
:columns="columns"
:data="data"
:loading="loading"
:pagination="pagination"
@pagination-current-change="paginationCurrentChange"/>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
import { BusinessTable1List } from '@api/demo.business.table.1'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '卡密',
key: 'key',
width: 320
},
{
title: '面值',
key: 'value'
},
{
title: '管理员',
key: 'admin'
},
{
title: '创建时间',
key: 'dateTimeCreat'
},
{
title: '使用时间',
key: 'dateTimeUse'
}
],
data: [],
loading: false,
pagination: {
currentPage: 1,
pageSize: 5,
total: 0
}
}
},
mounted () {
this.fetchData()
},
methods: {
paginationCurrentChange (currentPage) {
this.pagination.currentPage = currentPage
this.fetchData()
},
fetchData () {
this.loading = true
BusinessTable1List({
...this.pagination
}).then(res => {
this.data = res.list
this.pagination.total = res.page.total
this.loading = false
}).catch(err => {
console.log('err', err)
this.loading = false
})
}
}
}
</script>

58
src/views/demo/d2-crud/demo3/code.js Normal file
View File

@@ -0,0 +1,58 @@
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: {
border: true
}
}
}
}
</script>`

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

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

74
src/views/demo/d2-crud/demo3/index.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<d2-container :filename="filename">
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
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: {
border: true
}
}
}
}
</script>

134
src/views/demo/d2-crud/demo30/code.js Normal file
View File

@@ -0,0 +1,134 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:edit-template="editTemplate"
:form-options="formOptions"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel"
@form-data-change="handleFormDataChange"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
forbidEdit: true,
showEditButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
forbidEdit: false,
showEditButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
}
],
rowHandle: {
columnHeader: '编辑表格',
edit: {
icon: 'el-icon-edit',
text: '点我进行编辑',
size: 'small'
}
},
editTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
},
forbidEdit: {
title: '禁用按钮',
value: false,
component: {
show: false
}
},
showEditButton: {
title: '显示按钮',
value: true,
component: {
show: false
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleFormDataChange ({ key, value }) {
console.log(key)
console.log(value)
},
handleRowEdit ({ index, row }, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '编辑成功',
type: 'success'
})
done()
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消编辑',
type: 'warning'
})
done()
}
}
}
</script>`

1
src/views/demo/d2-crud/demo30/doc.md Normal file
View File

@@ -0,0 +1 @@
通过 `form-data-change` 事件可以监听表单内的数据变化，监听在crud内部是通过change事件触发的（这意味着input类组件失去焦点才会触发事件，单纯输入不会触发），接收一个对象参数 {key, value}，`key` 为改变的字段，`value` 为改变后的值。代码如下：

150
src/views/demo/d2-crud/demo30/index.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<d2-container :filename="filename">
<template slot="header">表单事件监听</template>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:edit-template="editTemplate"
:form-options="formOptions"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel"
@form-data-change="handleFormDataChange"/>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
forbidEdit: true,
showEditButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
forbidEdit: false,
showEditButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
}
],
rowHandle: {
columnHeader: '编辑表格',
edit: {
icon: 'el-icon-edit',
text: '点我进行编辑',
size: 'small'
}
},
editTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
},
forbidEdit: {
title: '禁用按钮',
value: false,
component: {
show: false
}
},
showEditButton: {
title: '显示按钮',
value: true,
component: {
show: false
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleFormDataChange ({ key, value }) {
console.log(key)
console.log(value)
},
handleRowEdit ({ index, row }, done) {
this.formOptions.saveLoading = true
setTimeout(() => {
console.log(index)
console.log(row)
this.$message({
message: '编辑成功',
type: 'success'
})
done()
this.formOptions.saveLoading = false
}, 300)
},
handleDialogCancel (done) {
this.$message({
message: '取消编辑',
type: 'warning'
})
done()
}
}
}
</script>

88
src/views/demo/d2-crud/demo31/code.js Normal file
View File

@@ -0,0 +1,88 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data">
<el-button slot="header" style="margin-bottom: 5px" @click="updateCell">更新第二行日期</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="updateRow">更新第三行所有数据</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增一行</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="removeRow">删除最后一行</el-button>
</d2-crud>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
forbidEdit: true,
showEditButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
forbidEdit: false,
showEditButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
}
]
}
},
methods: {
updateCell () {
this.$refs.d2Crud.updateCell(1, 'date', '2018-01-01')
},
updateRow () {
this.$refs.d2Crud.updateRow(2, {
date: '2018-01-01',
name: '王小小',
address: '上海市普陀区金沙江路 2333 弄'
})
},
addRow () {
this.$refs.d2Crud.addRow({
date: '2018-01-01',
name: '王小二',
address: '上海市普陀区金沙江路 7777 弄'
})
},
removeRow () {
this.$refs.d2Crud.removeRow(this.$refs.d2Crud.d2CrudData.length - 1)
}
}
}
</script>`

15
src/views/demo/d2-crud/demo31/doc.md Normal file
View File

@@ -0,0 +1,15 @@
`D2 Crud` 向外部暴露了一些方法，除了之前介绍过的 `showDialog` 和 `closeDialog` 方法，还有以下几个常用方法：
- updateCell
* 更新单元格
* 参数：rowIndex, key, value
- updateRow
* 更新行
* 参数：index, row
- addRow
* 新增一行
* 参数：row
- removeRow
* 删除一行
* 参数：index
代码如下：

104
src/views/demo/d2-crud/demo31/index.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<d2-container :filename="filename">
<template slot="header">CRUD事件</template>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data">
<el-button slot="header" style="margin-bottom: 5px" @click="updateCell">更新第二行日期</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="updateRow">更新第三行所有数据</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增一行</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="removeRow">删除最后一行</el-button>
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
forbidEdit: true,
showEditButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
forbidEdit: false,
showEditButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
}
]
}
},
methods: {
updateCell () {
this.$refs.d2Crud.updateCell(1, 'date', '2018-01-01')
},
updateRow () {
this.$refs.d2Crud.updateRow(2, {
date: '2018-01-01',
name: '王小小',
address: '上海市普陀区金沙江路 2333 弄'
})
},
addRow () {
this.$refs.d2Crud.addRow({
date: '2018-01-01',
name: '王小二',
address: '上海市普陀区金沙江路 7777 弄'
})
},
removeRow () {
this.$refs.d2Crud.removeRow(this.$refs.d2Crud.d2CrudData.length - 1)
}
}
}
</script>

75
src/views/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/views/demo/d2-crud/demo4/doc.md Normal file
View File

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

91
src/views/demo/d2-crud/demo4/index.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<d2-container :filename="filename">
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
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>

73
src/views/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/views/demo/d2-crud/demo5/doc.md Normal file
View File

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

89
src/views/demo/d2-crud/demo5/index.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<d2-container :filename="filename">
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
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>

83
src/views/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/views/demo/d2-crud/demo6/doc.md Normal file
View File

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

99
src/views/demo/d2-crud/demo6/index.vue Normal file
View File

@@ -0,0 +1,99 @@
<template>
<d2-container :filename="filename">
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
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>

122
src/views/demo/d2-crud/demo7/code.js Normal file
View File

@@ -0,0 +1,122 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:options="options"
:rowHandle="rowHandle"
@row-remove="handleRowRemove"/>
</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
}
}
}
},
methods: {
handleRowRemove ({ index, row }, done) {
this.$message({
message: '删除成功',
type: 'success'
})
done()
}
}
}
</script>`

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

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

138
src/views/demo/d2-crud/demo7/index.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<d2-container :filename="filename">
<template slot="header">流体高度</template>
<d2-crud
:columns="columns"
:data="data"
:options="options"
:rowHandle="rowHandle"
@row-remove="handleRowRemove"/>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
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
}
}
}
},
methods: {
handleRowRemove ({ index, row }, done) {
this.$message({
message: '删除成功',
type: 'success'
})
done()
}
}
}
</script>

106
src/views/demo/d2-crud/demo8/code.js Normal file
View File

@@ -0,0 +1,106 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '配送信息',
children: [
{
title: '姓名',
key: 'name'
},
{
title: '地址',
children: [
{
title: '省份',
key: 'province'
},
{
title: '市区',
key: 'city'
},
{
title: '地址',
key: 'address'
}
]
},
]
}
],
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
}
]
}
}
}
</script>`

1
src/views/demo/d2-crud/demo8/doc.md Normal file
View File

@@ -0,0 +1 @@
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系，只需在 `columns` 中使用 `children` 字段对子级表头进行嵌套即可。代码如下：

122
src/views/demo/d2-crud/demo8/index.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<d2-container :filename="filename">
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '配送信息',
children: [
{
title: '姓名',
key: 'name'
},
{
title: '地址',
children: [
{
title: '省份',
key: 'province'
},
{
title: '市区',
key: 'city'
},
{
title: '地址',
key: 'address'
}
]
}
]
}
],
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
}
]
}
}
}
</script>

64
src/views/demo/d2-crud/demo9/code.js Normal file
View File

@@ -0,0 +1,64 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:options="options"
index-row
@current-change="handleCurrentChange"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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: {
highlightCurrentRow: true
}
}
},
methods: {
handleCurrentChange (currentRow, oldCurrentRow) {
console.log(currentRow)
console.log(oldCurrentRow)
}
}
}
</script>`

1
src/views/demo/d2-crud/demo9/doc.md Normal file
View File

@@ -0,0 +1 @@
`D2 Crud` 组件提供了单选的支持，只需要在 `options` 对象中将 `highlightCurrentRow` 属性设为 `true` 即可实现单选。之后由 `current-change` 事件来管理选中时触发的事件，它会传入 `currentRow` 和 `oldCurrentRow`。如果需要显示索引，需要配置 `index-row` 属性。代码如下：

81
src/views/demo/d2-crud/demo9/index.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<d2-container :filename="filename">
<template slot="header">单选</template>
<d2-crud
:columns="columns"
:data="data"
:options="options"
index-row
@current-change="handleCurrentChange">
</d2-crud>
<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="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
filename: __filename,
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
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: {
highlightCurrentRow: true
}
}
},
methods: {
handleCurrentChange (currentRow, oldCurrentRow) {
console.log(currentRow)
console.log(oldCurrentRow)
}
}
}
</script>

31
src/views/demo/d2-crud/index/index.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<d2-container :filename="filename" type="ghost">
<d2-module-index-banner slot="header" v-bind="banner"/>
<el-alert
title="目前 d2-crud 已经升级至 2.x，并且和 1.x 存在一些 API 不兼容，如果您使用的是 1.x，请点击此消息跳转至旧版示例"
type="warning"
:closable="false"
class="d2-mt"
show-icon
@click.native="$open('https://v1.d2-crud.fairyever.com/#/d2-crud/index')">
</el-alert>
<d2-module-index-menu :menu="menu"/>
</d2-container>
</template>
<script>
import menu from '@/menu/modules/demo-d2-crud'
export default {
data () {
return {
filename: __filename,
menu,
banner: {
title: 'D2 CRUD v2',
subTitle: 'D2 Crud 是一个基于 Vue.js 和 Element UI 的表格组件，封装了常用的表格操作。',
link: 'https://github.com/d2-projects/d2-crud'
}
}
}
}
</script>