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

d2-crud 表单校验

Browse Source 
Former-commit-id: fdb0d1333ab90454a80078a692de62d68b528de5 [formerly fdb0d1333ab90454a80078a692de62d68b528de5 [formerly fdb0d1333ab90454a80078a692de62d68b528de5 [formerly fdb0d1333ab90454a80078a692de62d68b528de5 [formerly ad69fa918cb6a7c8be79693dd9d459ff24bd8850 [formerly d44f36c938ac0604b92959028777e5d8edd8b259]]]]]
Former-commit-id: af610347b31ca2bf8277d8fefeb4831899ff8ed3
Former-commit-id: 1e5e4c58322d87756e2fc181607ee89e8a00c323
Former-commit-id: 6fb929e6919d633754f6ed05c1c0dc5fc52b1053 [formerly e009db20b84c2ceb15aad1f1a49e1e034aebcd3f]
Former-commit-id: 9d4cd83c14915b798c77101bfc0e1a75677e054c
Former-commit-id: ae9f646e106466297f17ce2acef5c3b6d40b2a16
Former-commit-id: 483af02ce21d32235ee89fa772aaf8559a13affd
Former-commit-id: 93fff30eff6af98e6cc3f6d2194d187119ba1ef7
Former-commit-id: a557fac7e8617f522e810894526221fce2931c0a
This commit is contained in:
孙昊翔
2018-08-28 16:20:16 +08:00
parent 2d264eb09c
commit 5495b76602
9 changed files with 244 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/demo/d2-crud/demo16/code.js
View File

@@ -4,7 +4,7 @@ export default `<template>
:columns="columns"
:data="data"
title="D2 CRUD"
addMode
add-mode
:addButton="addButton"
:form-template="formTemplate"
:form-options="formOptions"

2
src/pages/demo/d2-crud/demo16/doc.md
View File

@@ -1 +1 @@
通过给 `D2 Crud` 传入 `addMode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：

2
src/pages/demo/d2-crud/demo16/index.vue
View File

@@ -5,7 +5,7 @@
:columns="columns"
:data="data"
title="D2 CRUD"
addMode
add-mode
:addButton="addButton"
:form-template="formTemplate"
:form-options="formOptions"

110
src/pages/demo/d2-crud/demo22/code.js Normal file
View File

@@ -0,0 +1,110 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
title="D2 CRUD"
addMode
:addButton="addButton"
:form-template="formTemplate"
:form-options="formOptions"
:form-rules="formRules"
@row-add="handleRowAdd"
@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 弄'
}
],
addButton: {
text: '点我查看表单校验',
icon: 'el-icon-plus',
size: 'small'
},
formTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
},
formRules: {
date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
}
}
},
methods: {
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/pages/demo/d2-crud/demo22/doc.md Normal file
View File

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

126
src/pages/demo/d2-crud/demo22/index.vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<d2-container>
<template slot="header">表单校验</template>
<d2-crud
:columns="columns"
:data="data"
title="D2 CRUD"
addMode
:addButton="addButton"
:form-template="formTemplate"
:form-options="formOptions"
:form-rules="formRules"
@row-add="handleRowAdd"
@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="D2 CRUD" link="https://github.com/d2-projects/d2-crud"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: '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'
},
formTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
},
formRules: {
date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
}
}
},
methods: {
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>