lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

crud example 

Former-commit-id: e345e832b7f55adfa312e0972693939953150e46 [formerly e345e832b7f55adfa312e0972693939953150e46 [formerly e345e832b7f55adfa312e0972693939953150e46 [formerly e345e832b7f55adfa312e0972693939953150e46 [formerly b836828ea96a2163653f09cfd4c39c1fe537b4ac [formerly 030702be43d00a35d004f13dff3bb74dd089f14a]]]]]
Former-commit-id: 5c0961245ea5c8d68bc8a5b647c251340e47c98e
Former-commit-id: 7c0668c675d4339929de35632a278bb2c7c1e62d
Former-commit-id: 75cef2b779bafae654cbd5044cc5eca8eceec67c [formerly 07c3860026c0a560111de35fcf6546dcd0fcd27d]
Former-commit-id: 39d1e5aecd1c0fb8140d3bb348457834a69aa27f
Former-commit-id: d4802ee50b46b8747a9431b60b07016ad8c5c900
Former-commit-id: 5996d6cc294f4232189f181b2b75eeafb11c7eb6
Former-commit-id: 50b5c8a0b27073ab09fa4bdde677c0a249a33a7c
Former-commit-id: 09c6958edf70626c1f1f48b683ca54dcd8131c40
This commit is contained in:
孙昊翔 2018-09-19 10:58:28 +08:00
parent 456dfd0363
commit 4aaab112c6
13 changed files with 522 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -12,7 +12,7 @@
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"@d2-projects/d2-crud": "^1.1.0",
"@d2-projects/d2-crud": "^1.2.0",
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"better-scroll": "^1.12.1",

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

@ -8,6 +8,8 @@ export default {
title: '基础功能',
children: [
{ path: `${pre}demo1`, title: '基础表格' },
{ path: `${pre}demo27`, title: '加载状态' },
{ path: `${pre}demo28`, title: '自定义加载状态' },
{ path: `${pre}demo2`, title: '带斑马纹表格' },
{ path: `${pre}demo3`, title: '带边框表格' },
{ path: `${pre}demo4`, title: '带状态表格' },
@ -28,6 +30,7 @@ export default {
{
title: '数据操作',
children: [
{ path: `${pre}demo29`, title: '分页' },
{ path: `${pre}demo16`, title: '新增数据' },
{ path: `${pre}demo17`, title: '修改数据' },
{ path: `${pre}demo18`, title: '删除数据' },

54
src/pages/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/pages/demo/d2-crud/demo27/doc.md Normal file
View File

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

76
src/pages/demo/d2-crud/demo27/index.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<d2-container>
<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://d2-projects.github.io/d2-admin-doc/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: '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/pages/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/pages/demo/d2-crud/demo28/doc.md Normal file
View File

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

82
src/pages/demo/d2-crud/demo28/index.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<d2-container>
<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://d2-projects.github.io/d2-admin-doc/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: '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>

113
src/pages/demo/d2-crud/demo29/code.js Normal file
View File

@ -0,0 +1,113 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:pagination="pagination"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: 'ID',
key: 'id'
},
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
id: 5,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 6,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 7,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 8,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
id: 9,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 10,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 11,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 12,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
pagination: {
pageSize: 5,
layout: 'prev, pager, next, total'
}
}
}
}
</script>`

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

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

128
src/pages/demo/d2-crud/demo29/index.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<d2-container>
<template slot="header">分页</template>
<d2-crud
:columns="columns"
:data="data"
:pagination="pagination"/>
<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://d2-projects.github.io/d2-admin-doc/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
doc,
code,
columns: [
{
title: 'ID',
key: 'id'
},
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
id: 5,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 6,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 7,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 8,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
id: 9,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 10,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 11,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 12,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
pagination: {
pageSize: 5,
layout: 'prev, pager, next, total'
}
}
}
}
</script>

2
src/router/routes.js.REMOVED.git-id
View File

@ -1 +1 @@
c62802e4146a602e5c498cdb99205b56768d4047
b2bf5f06d7bc6fbdb1464a1eea0e2eae737ea6af

2
yarn.lock.REMOVED.git-id
View File

@ -1 +1 @@
98d7a73c1fb484dbcca94b8f6a41f916b8a30c20
9f0de1b1283741f3ab3b7a925f9b96808cfb51e5