Я использую vue. js (4.3.1) и element-ui. Я хотел бы определить правила проверки моей формы в диалоговом окне.
например:
https://codepen.io/xmcx/pen/XWmMXKp
Код
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.1/lib/index.js"></script>
<div id="app">
<template>
<div>
<div class="top-5">
<el-row>
<el-button class="search-btn" type="primary" @click="initOperationData({},'new')">New</el-button>
</el-row>
</div>
<div id="dt" class="top-5">
<el-table :data="dataList" stripe border highlight-current-row show-overflow-tooltip>
<el-table-column label="Name" prop="name" header-align="center" align="center"></el-table-column>
<el-table-column label="Age" prop="age" header-align="center" align="center"></el-table-column>
<el-table-column label="Gender" prop="gender" header-align="center" align="center">
<template slot-scope="scope">{{genderConverter(scope.row.gender)}}</template>
</el-table-column>
<el-table-column label="State" prop="state" header-align="center" align="center">
<template slot-scope="scope">{{stateConverter(scope.row.state)}}</template>
</el-table-column>
<el-table-column label="Operation" width="144px" fixed="right" header-align="center" align="center">
<template slot-scope="scope">
<el-row>
<el-button @click="initOperationData(scope.row, 'edit')" type="text" size="small">Edit
</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</div>
<div class="dialog">
<el-dialog :title="operationConverter(operation) + 'User'" :visible.sync="operationDialogVisible"
width="400px" modal :close-on-press-escape="false" :close-on-click-modal="false"
@closed="dialogClosed('operationData')">
<el-form :model="operationData" ref="operationData" :rules="rules" label-width="80px">
<el-form-item label="Name" prop="name">
<el-input v-model="operationData.name" placeholder="please enter name" clearable/>
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model="operationData.age" placeholder="please enter age" clearable/>
</el-form-item>
<el-form-item label="Gender" prop="gender">
<el-select v-model="operationData.gender" placeholder="please choice gender" filterable clearable>
<el-option v-for="item in genderList" :key="item.value" :label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="State" prop="state">
<el-select v-model="operationData.state" placeholder="please choice state" filterable clearable>
<el-option v-for="item in stateList" :key="item.value" :label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="save('operationData')">Save</el-button>
<el-button @click="operationDialogVisible = false">Close</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
</div>
var Main = {
data () {
return {
operationList: Object.freeze([
{value: 'new', label: 'New'},
{value: 'edit', label: 'Edit'}
]),
stateList: Object.freeze([
{value: 'enabled', label: 'Enabled'},
{value: 'disabled', label: 'Disabled'}
]),
genderList: Object.freeze([
{value: 'male', label: 'Male'},
{value: 'female', label: 'Female'}
]),
dataList: [
{name: 'Peter', age: undefined, state: 'enabled', gender: 'male'},
{name: 'Rocky', age: null, state: 'enabled', gender: 'male'},
{name: 'Bill', state: 'enabled', gender: 'male'},
{name: 'Alice', state: undefined, age: 12, gender: 'female'},
{name: 'Amy', state: null, age: 12, gender: 'female'},
{name: 'Lucy', age: 12, gender: 'female'}
],
total: 2,
operationData: {},
operation: null,
operationDialogVisible: false,
rules: {
name: [
{required: true, message: 'Name is required', trigger: 'change'},
{required: true, message: 'Name is required', trigger: 'clear'}
],
age: [
{required: true, message: 'Age is required', trigger: 'change'},
{required: true, message: 'Age is required', trigger: 'clear'}
],
state: [
{required: true, message: 'State is required', trigger: 'change'},
{required: true, message: 'State is required', trigger: 'clear'}
],
gender: [
{required: true, message: 'Gender is required', trigger: 'change'},
{required: true, message: 'Gender is required', trigger: 'clear'}
]
}
}
},
methods: {
initOperationData (data, operation) {
this.operationData = JSON.parse(JSON.stringify(data))
this.operation = operation
this.operationDialogVisible = true
},
save (formName) {
this.$refs[formName].validate((valid) => {
if (!valid) {
return false
} else {
this.$message({showClose: true, message: 'Save success', type: 'success'})
}
})
},
dialogClosed (formName) {
this.operation = null
this.resetFields(formName)
},
resetFields (formName) {
this.$refs[formName].resetFields()
},
operationConverter (value) {
for (let item of this.operationList) {
if (value === item.value) return item.label
}
return null
},
stateConverter (value) {
for (let item of this.stateList) {
if (value === item.value) return item.label
}
return null
},
genderConverter (value) {
for (let item of this.genderList) {
if (value === item.value) return item.label
}
return null
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
Проблема
Если я буду работать в следующем порядке, в диалоговом окне появится сообщение об ошибке проверки (надеюсь, оно будет не отображаются):
order-1: Edit -> Close -> New (или edit) ...
Если я работаю в следующем порядке, все в порядке:
order-2: New -> Close -> New (или edit) ...
Примечание
Перед работой в порядке-1 или order- 2, пожалуйста, обновите страницу sh.