嵌套el-form的 el-dialog—彻底搞懂添加和编辑，确认修改和取消修改

1.添加按钮

<el-button type="primary" @click="addVIPdialog">添加会员卡配置</el-button>

2.el-table中，单条数据的编辑按钮

<el-table-column label="操作" width="150">
    <template slot-scope="{ row, $index }">
        <el-button type="text" @click="handleEdit(row)">编辑</el-button>            
    </template>
</el-table-column>

3.嵌套el-form的el-dialog对话框

<el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="form">
    <el-form-item label="等级" :label-width="formLabelWidth">
        <el-select v-model="form.grade">
            <el-option label="1级" value="1"></el-option>
            <el-option label="2级" value="2"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input v-model="form.memberName" autocomplete="off"></el-input>
    </el-form-item>	
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVIP">确 定</el-button>
    </div>
</el-dialog>

4.<script>中的数据与方法

<script>
// 这个方法是从别的项目上学过来的
const defaultform = {	
	grade: "",
	memberName: "",	
};
export default {
    data() {
        return {
            // 默认不显示el-dialog对话框
            dialogFormVisible: false,
            // 对话框标题
            title: "添加会员配置",
            tableData: [
                {
                    memberName: "黄金会员",
                    grade: "1级",	
                },
                ......
            ],
            // 
            form: Object.assign({}, defaultform),
        };
    },
    methods: {
        // 添加按钮
        addVIPdialog() {
            this.form = Object.assign({}, defaultform);
            this.title = "添加会员配置";
            this.dialogFormVisible = true;
        },        
        // 编辑按钮
        handleEdit(row) {
            this.form = Object.assign({}, row);
            this.dialogFormVisible = true;
            this.title = "编辑会员配置";
        },
        // 添加或编辑 确认按钮
        addVIP() {
            // console.log(this.defaultform == this.form); // false
            this.dialogFormVisible = false;
            console.log("提交form表单", this.form);
            // this.form = Object.assign({}, defaultform);
        },
    },
};
</script>

问题1：点击取消按钮后，数据仍然更新了，而且页面上的数据也发生了变化，按常理说，点击取消之后，应该回到初始数据状态。

解决方案：把编辑按钮传过来的对象row原始数据拷贝一份，提交的数据是拷贝的那个form，所以不会影响到原来的row数据。

问题2：先打开编辑按钮，关闭再打开添加按钮时，会留存上次的数据，按常理说，应该是空白的form表单。

解决办法：初始定义一个默认空表单对象(如果有默认值，就设置上),data中的form数据拷贝一份默认的数据，当打开添加按钮时，就将表单元素置成默认。

补充，使用 Object.assign({}, defaultform)不是最好的办法，因为它第一层拷贝是深拷贝，但第二层及之后是浅拷贝。我这里是因为数据只有一层所以用的这个办法，但最好使用深拷贝。

ES6之object.assign()是深拷贝还是浅拷贝——链接：blog.csdn.net/weixin_4486…