2018-04-22 基于iView中根据列定义动态生成表单

https://my.oschina.net/KIDsama/blog/1529421

<template>
<Form
label-position="right"
ref="advancedForm"
:model="value"
:rules="ruleValidate"
:label-width="80"
@submit="advancedSearch('advancedForm')">
<Form-item
v-for="column in columns"
v-if="!column.readonly && !/action|index|selection|expand/.test(column.key)"
:key="column.key"
:label="column.title"
:prop="column.key">
<codemirror
v-if="column.type == 'code'"
ref="myEditor"
v-model="value[column.key]"
:options="editorOptions"
@change="handleSubmit('advancedForm')">
</codemirror>
<Select
v-else-if="column.type == 'enum'"
v-model="value[column.key]"
transfer
@on-change="handleSubmit('advancedForm')">
<Option
v-for="option in column.enum"
:key="option.value"
:value="option.value">{{option.label}}
</Option>
</Select>
<Input
v-else-if="column.type == 'textarea'"
type="textarea"
v-model.trim="value[column.key]"
:placeholder="column.key"
@on-change="handleSubmit('advancedForm')">
</Input>
<Input
v-else
v-model.trim="value[column.key]"
:placeholder="column.key"
@on-change="handleSubmit('advancedForm')"></Input>
</Form-item>

</Form>

</template>
<script>
import Scripts from '../../../columns/Scripts'
import Codemirror from '../../common/CodeMirror.vue'
export default {
components: {
Codemirror
},
mixins: [Scripts],
props: {
value: {
type: Object,
default: () => {
return {
confirmation: '',
description: ''
}
},
}
},
data() {
return {
ruleValidate: {
name: [
{ required: true, message: '脚本名不能为空', trigger: 'blur' }
]
},
editorOptions: {
tabSize: 4,
mode: 'text/x-python',
lineNumbers: true,
line: true,
theme: "monokai",
keyMap: "sublime",
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
styleSelectedText: true,
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
}
}
},
methods: {
handleSubmit(name) {

        this.$refs[name].validate((valid) => {
            if (valid) {
                this.$emit('input', this.value);
            }
        })
    }
}

}
</script>