element动态form实现

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>