Merge remote-tracking branch 'origin/develop'
Former-commit-id: 6366f34f3e0b6cbfda6c9c4bd9ca019521df5f22 [formerly 6366f34f3e0b6cbfda6c9c4bd9ca019521df5f22 [formerly 6366f34f3e0b6cbfda6c9c4bd9ca019521df5f22 [formerly 6366f34f3e0b6cbfda6c9c4bd9ca019521df5f22 [formerly d938b73b706677182255e14306d6e0299d0e56ca [formerly 6a97857fdd2dfae76e843112ec86a75cfdfb999f]]]]] Former-commit-id: 9528ffdc2ac0aba1692467f834bf9f377813beeb Former-commit-id: 82f85a8fa9d66075e15326ce8f756cbea6f697a4 Former-commit-id: ded2896b6d8d1b315d5845233d958972e48b3c17 [formerly 84f082232d0f827f419680e05aabb6435cf84f00] Former-commit-id: df49c5e8cec64a6b6727d8008e21a8fea7565d3b Former-commit-id: a0b99abb96b008bf8f1a394f85bc00dd259ea67a Former-commit-id: 9ea399bc0617305cda230d33526e316035fe5fa7 Former-commit-id: ba9f5cbbc9656e86aea571421c25fba65793eb36 Former-commit-id: a98d5c2b9f34ee6c539c35d226b96d9ca542beb5
This commit is contained in:
@@ -11,7 +11,7 @@
|
||||
"test:unit": "vue-cli-service test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@d2-projects/d2-crud": "^1.0.2",
|
||||
"@d2-projects/d2-crud": "^1.1.0",
|
||||
"axios": "^0.17.1",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"better-scroll": "^1.12.1",
|
||||
|
||||
@@ -35,7 +35,9 @@ export default {
|
||||
{ path: `${pre}demo20`, title: '表单组件渲染' },
|
||||
{ path: `${pre}demo21`, title: '表单布局' },
|
||||
{ path: `${pre}demo22`, title: '表单校验' },
|
||||
{ path: `${pre}demo23`, title: '表格内编辑' }
|
||||
{ path: `${pre}demo23`, title: '表格内编辑' },
|
||||
{ path: `${pre}demo25`, title: '表格自定义组件' },
|
||||
{ path: `${pre}demo26`, title: '表单自定义组件' }
|
||||
]
|
||||
}
|
||||
])('/demo/d2-crud/')
|
||||
|
||||
@@ -34,22 +34,30 @@ export default {
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
forbidEdit: true,
|
||||
showEditButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: true
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
@@ -58,7 +66,18 @@ export default {
|
||||
icon: 'el-icon-edit',
|
||||
text: '点我进行编辑',
|
||||
size: 'small',
|
||||
fixed: 'right'
|
||||
show (index, row) {
|
||||
if (row.showEditButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
disabled (index, row) {
|
||||
if (row.forbidEdit) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
formTemplate: {
|
||||
|
||||
@@ -50,22 +50,30 @@ export default {
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
forbidEdit: true,
|
||||
showEditButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: true
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
@@ -74,7 +82,18 @@ export default {
|
||||
icon: 'el-icon-edit',
|
||||
text: '点我进行编辑',
|
||||
size: 'small',
|
||||
fixed: 'right'
|
||||
show (index, row) {
|
||||
if (row.showEditButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
disabled (index, row) {
|
||||
if (row.forbidEdit) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
formTemplate: {
|
||||
|
||||
@@ -31,22 +31,30 @@ export default {
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
forbidRemove: true,
|
||||
showRemoveButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: true
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
@@ -54,7 +62,19 @@ export default {
|
||||
icon: 'el-icon-delete',
|
||||
size: 'small',
|
||||
fixed: 'right',
|
||||
confirm: true
|
||||
confirm: true,
|
||||
show (index, row) {
|
||||
if (row.showRemoveButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
disabled (index, row) {
|
||||
if (row.forbidRemove) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,22 +47,30 @@ export default {
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
forbidRemove: true,
|
||||
showRemoveButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: true
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
@@ -70,7 +78,19 @@ export default {
|
||||
icon: 'el-icon-delete',
|
||||
size: 'small',
|
||||
fixed: 'right',
|
||||
confirm: true
|
||||
confirm: true,
|
||||
show (index, row) {
|
||||
if (row.showRemoveButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
disabled (index, row) {
|
||||
if (row.forbidRemove) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
29
src/pages/demo/d2-crud/demo25/MyTag.vue
Normal file
29
src/pages/demo/d2-crud/demo25/MyTag.vue
Normal 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/pages/demo/d2-crud/demo25/codeComponent.js
Normal file
29
src/pages/demo/d2-crud/demo25/codeComponent.js
Normal 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>`
|
||||
72
src/pages/demo/d2-crud/demo25/codeOverall.js
Normal file
72
src/pages/demo/d2-crud/demo25/codeOverall.js
Normal file
@@ -0,0 +1,72 @@
|
||||
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'
|
||||
}
|
||||
}
|
||||
],
|
||||
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>`
|
||||
77
src/pages/demo/d2-crud/demo25/codePart.js
Normal file
77
src/pages/demo/d2-crud/demo25/codePart.js
Normal file
@@ -0,0 +1,77 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
],
|
||||
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/pages/demo/d2-crud/demo25/doc.md
Normal file
1
src/pages/demo/d2-crud/demo25/doc.md
Normal 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)的写法,代码如下:
|
||||
104
src/pages/demo/d2-crud/demo25/index.vue
Normal file
104
src/pages/demo/d2-crud/demo25/index.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<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://d2-projects.github.io/d2-admin-doc/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 {
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataChange (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
29
src/pages/demo/d2-crud/demo26/MyTag.vue
Normal file
29
src/pages/demo/d2-crud/demo26/MyTag.vue
Normal 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/pages/demo/d2-crud/demo26/codeComponent.js
Normal file
29
src/pages/demo/d2-crud/demo26/codeComponent.js
Normal 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/pages/demo/d2-crud/demo26/codeOverall.js
Normal file
130
src/pages/demo/d2-crud/demo26/codeOverall.js
Normal file
@@ -0,0 +1,130 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
:form-template="formTemplate"
|
||||
@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'
|
||||
}
|
||||
},
|
||||
formTemplate: {
|
||||
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/pages/demo/d2-crud/demo26/codePart.js
Normal file
135
src/pages/demo/d2-crud/demo26/codePart.js
Normal file
@@ -0,0 +1,135 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
:form-template="formTemplate"
|
||||
@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'
|
||||
}
|
||||
},
|
||||
formTemplate: {
|
||||
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/pages/demo/d2-crud/demo26/doc.md
Normal file
1
src/pages/demo/d2-crud/demo26/doc.md
Normal file
@@ -0,0 +1 @@
|
||||
向 `formTemplate` 中需要渲染自定义组件的 `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)的写法,代码如下:
|
||||
162
src/pages/demo/d2-crud/demo26/index.vue
Normal file
162
src/pages/demo/d2-crud/demo26/index.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">表单自定义组件</template>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
:form-template="formTemplate"
|
||||
@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://d2-projects.github.io/d2-admin-doc/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 {
|
||||
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'
|
||||
}
|
||||
},
|
||||
formTemplate: {
|
||||
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 +1 @@
|
||||
8f7502120cb1936fb8f1ef83f9462574f64d9d4b
|
||||
e5f86ceea9da8ed5238a065835a8d86dfa3cf688
|
||||
@@ -1 +1 @@
|
||||
ee5cecf1e3ba566cb1ff834db9f3c1f9d910fb26
|
||||
98d7a73c1fb484dbcca94b8f6a41f916b8a30c20
|
||||
Reference in New Issue
Block a user