element动态form实现

列是根据json数组生成的

点击编辑，会根据行数据生成对应的表单

rules规则是遍历生成，目前是所有列全必填

<template>
<div><el-table :data="tableData" style="width: 100%"><el-table-column v-for="item in formList" :prop="item.prop" :key="item.prop" :label="item.label"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><span class="editrow" @click="editrow(scope.row)">编辑</span></template></el-table-column></el-table><el-dialog title="编辑" :visible.sync="dialogVisible" width="600px" :before-close="handleClose"><el-form :model="addOrUpdateForm" ref="addOrUpdateForm" label-width="100px" class="demo-dynamic" :rules="rules"><el-form-item v-for="(item, index) in formList" :label="item.label" :key="index" :prop="item.prop"><el-input v-model="addOrUpdateForm[item.prop]" ></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="submitForm('addOrUpdateForm')">确 定</el-button></span></el-dialog></div>
</template><script>
export default {data() {return {dialogVisible: false,//列头formList: [{label: "表单名1",prop: "form01"},{label: "表单名2",prop: "form02"},{label: "表单名3",prop: "form03"},{label: "表单名4",prop: "form04"},{label: "表单名5",prop: "form05"},],//表格内容tableData: [{"form01": "11","form02": "12","form03": "13","form04": "14"},{"form01": "21","form02": "22","form03": "23","form04": "24"},{"form01": "31","form02": "32","form03": "33","form04": "34"},{"form01": "41","form02": "42","form03": "43","form04": "44"}],rules: {},addOrUpdateForm: {},};},mounted(){},methods: {editrow(row) {this.rules = {};this.formList.map(x=>{this.rules[x.prop] = [{required: true,message: '请输入'+x.label,trigger: 'blur'}]});this.addOrUpdateForm = Object.assign({},row)this.dialogVisible = true;},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert("submit!");} else {console.log("error submit!!");return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},
};
</script><style scoped>
.demo-dynamic {width: 500px;padding: 20px;
}
.editrow {color: #409eff;
}
.el-button--primary {color: #fff;background-color: #409eff;border-color: #409eff;
}
</style>

element动态form实现相关推荐

element实现form表单动态添加email效果
前言: vue中使用element实现form表单动态添加email效果效果: 实现步骤: 实现源代码: <template><div><el-form ref=&qu ...
Struts 动态Form的验证框架步骤
注:Form有四种: { \import org.apache.struts.action.ActionForm;(静态Form) import org.apache.struts.action.Dy ...
Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...
使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat
[Element Warn][Form]model is required for validat 如文末的完整例子: 该提示说的是 form表单需要一个绑定一个对象(使用:model=" ...
element表格动态列、本地分页、动态form、自定义校验集成
json数组生成table列表格数据本地分页列支持动态显示/隐藏,列顺序支持自定义编辑行,根据行数据动态生成form form支持自定义校验 <template> <div&g ...
element组件------form
** 一.Radio 单选框(在一组备选项中进行单选) ** (1)基础用法(由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器.) <template><el- ...
如何给UI上可以接收focus事件的element动态注册onfocus处理函数
三大步骤: (1) 使用document.getElementById拿到待接收focus事件的ui元素: var button = document.getElementById('jerry'); ...
element 动态加载下拉框_记一次很坑的需求：给element-cascader添加一个重置和确定按钮...
这帖子是不用多高超技术或者是什么歪门邪道,只是做的过程中遇到很多的坑,我感觉我做的这个没人能遇到比我还多 [因为使用场景而产生] 的坑...想记录一下,原本是产品叫我找别的级联的插件,我真的觉得不想在 ...
element中form表单resetFields()方法重置表单无效
官方文档 // 调用resetFields但没有生效 resetForm() {this.$refs['form'].resetFields(); } 解决: form里需要ref 表单项el-for ...

element动态form实现

element动态form实现相关推荐

最新文章

热门文章