1.  列是根据json数组生成的
2. 点击编辑，会根据行数据生成对应的表单
3. 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>