<template>
<el-form ref="form" label-width="100px" :model="model" v-if="model" :rules="rules">
<el-row v-for="(item,index) in formModel" :key="index">
<el-col :span="12">
<el-form-item :label="item.title" :prop="item.file">
<span class="test_name">{{model.name}}</span>
<el-input v-if="item.type==='input'" v-model="item.value" placeholder="请输入"></el-input>
<el-select v-else-if="item.type==='select'" v-model="item.value" style=" 100%;">
<el-option
v-for="sel in item.selectList"
:key="sel.value"
:label="sel.label"
:value="sel.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="btn-group">
<el-button type="primary" @click="validateForm('form')">保存</el-button>
<el-button type="primary" plain>返回</el-button>
</div>
</el-col>
</el-row>
</el-form>
</template>
<script>
import {
Form,
FormItem,
Input,
Col,
Select,
Option,
Row,
Button,
Dialog
} from "element-ui";
import Vue from "vue";
export default {
name: "AddDialog",
components: {
[Form.name]: Form,
[FormItem.name]: FormItem,
[Row.name]: Row,
[Col.name]: Col,
[Input.name]: Input,
[Row.name]: Row,
[Select.name]: Select,
[Option.name]: Option,
[Button.name]: Button,
[Dialog.name]: Dialog
},
props: {
/**
* 需要字段
*/
formModel: {
type: Array,
required: true,
default: []
},
ruleArray: {
type: Object,
default: []
}
},
data() {
return {
model: {},
rules: []
};
},
updated() {
//因为是异步的数据，所以开始传递来的时候都是空的，获取后台数据以后传递过来的form数据改变，要重新渲染页面，所以要走updated方法
this.formModel.forEach((val, index) => {
let file = val.file;
let value = val.value;
//这里的写法不是响应式的写法，不会让vue监听到属性的添加或删除，所以<span class="test_name">{{model.name}}</span>这里并没有显示
// this.model[file] = value;
//这里vue监听到了mode 的变化，所以会显示最新的name值
//Vue.set方法用来新增对象的属性。如果要增加属性的对象是响应式的，那该方法可以确保属性被创建后也是响应式的，同时触发视图更新
Vue.set(this.model, file, value);
});
this.rules=this.ruleArray;//这里防止异步数据导致的初始化加载的时候因为各项值都是空而弹出验证消息
},
methods: {
validateForm(formName) {
this.$refs[formName].validate(async valid => {
if (valid) {
this.$emit("submitForm", this.model);
} else {
return false;
}
});
}
}
};
</script>
<style lang='less' scoped>
</style>