vue后台项目中通过id实现增添按钮和修改按钮的灵活切换

这是data里面的数据

 data () {
        return {
            dialogVisible: false,
            // 分页器第几页
            page: 1,
            // 当前页数展示条数
            limit: 3,
            // 总页数
            total: 0,
            // 列表数据
            list: [],
            // 收集品牌信息 属性需要看文档，不能随便定义
            tmForm: {
                logoUrl: '',
                tmName: ''
            },
            rules: {
                tmName: [
                    { required: true, message: '请输入品牌名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                logoUrl: [
                    { required: true, message: '请选择品牌图片', trigger: 'blur' },
                ],
            }
        }
    },

这是template的里面的代码

在这里老师通过动态数据绑定     :title="tmForm.id ? '修改品牌' : '添加品牌'" 

 <el-button class="addButton" icon="el-icon-plus" type="primary" @click="showDialog"> 
           添加
        </el-button>
        <!-- 表单区域 -->
        <el-table style="width: 100%" stripe border :data="list">
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="tmName" label="品牌名称" width="180" align="center">
            </el-table-column>
            <el-table-column prop="logoUrl" label="品牌LOGO" width="180" align="center">
                <template slot-scope="scope">
                    <!-- {{ scope.row }} 展示当前列数据-->
                    <img :src="scope.row.logoUrl" alt="图片" style="width: 100px;height: 80px;">
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <!-- <el-button type="warning" size="mini" icon="el-icon-edit" @click="showDialog"> -->
                    <el-button type="warning" size="mini" icon="el-icon-edit" @click="updateTradeMark(scope.row)">
                        修改
                    </el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加对话框 -->
        <!-- :before-close="handleClose" -->
     
        <el-dialog :title="tmForm.id ? '修改品牌' : '添加品牌'" :visible.sync="dialogVisible" width="50%">
            <!-- 主体内容 -->
            <!-- :model 收集表单数据和验证表单信息 -->
            <el-form :model="tmForm" :rules="rules" label-width="100px" ref="addOrUpdateFormRef">
                <!-- 品牌名称 -->
                <el-form-item label="品牌名称" prop="tmName">
                    <el-input v-model="tmForm.tmName"></el-input>
                </el-form-item>
                <!-- 品牌LOGO -->
                <el-form-item label="品牌LOGO" prop="logoUrl">
                    <!-- action 设置图片上传的地址 -->
                    <el-upload class="avatar-uploader" action="/dev-api/admin/product/fileUpload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addOrUpdateTradeMark">确定</el-button>
            </span>
        </el-dialog>

这是method里的函数

在showDialog函数里通过直接对data里面的数据置空，this.tmForm = { tmName: '', logoUrl: '' };然后实现了通过判断有无id来实现增添品牌和修改品牌的切换。

发现：老师之所以这样写this.tmForm = { tmName: '', logoUrl: '' };因为等同于

      this.tmForm.tmName='';

        this.tmForm.logoUrl='';

        this.tmForm.id='';

因为我当时试了一下直接将tmName和logoUrl置空,this.tmForm.tmName='';this.tmForm.logoUrl='';此时会出现点击修改按钮能正常显示修改品牌，但是再点击添加按钮时，这时因为id未置空，还是出现修改按钮的情况。

// 点击添加品牌的按钮
         showDialog () {
         this.dialogVisible = true;
         //清空对话框  方法一
         this.tmForm = { tmName: '', logoUrl: '' };
 },
  // 确定添加或修改按钮
        async addOrUpdateTradeMark () {
            // this.dialogVisible = false;
            const result = await this.$http.tradeMark.reqAddOrUpdateTradeMark(this.tmForm);
            if (result.code == 200) {
                this.$message.success(this.tmForm.id ? '修改品牌成功' : '添加品牌成功');
            }
            else this.$message.error(this.tmForm.id ? '修改品牌失败！' : '添加品牌失败！');
            this.getPageList();
            this.dialogVisible = false;
        },

 针对以上问题，我用了Element-UI组件中Form表单resetFields()重置方法，将表单置为初始值，

在template将添加按钮修改一下

<el-button class="addButton" icon="el-icon-plus"

        type="primary" @click="dialogVisible = true">

            添加

        </el-button>

并在el-dialog标签中添加ref="addOrUpdateFormRef"

 <el-dialog :title="tmForm.id ? '修改品牌' : '添加品牌'" :visible.sync="dialogVisible" width="50%"
 @close="addOrUpdateCateDialogClosed">

然后在el-form标签中添加ref="addOrUpdateFormRef"

最后实现addOrUpdateCateDialogClosed方法，

// 重置表单
        addOrUpdateCateDialogClosed () {
            this.$refs.addOrUpdateFormRef.resetFields();
            this.tmForm.id='';
        },

 注：当使用resetFields置空表单时，他只是将data里面的数据置为初始值，并不是置空，而id是服务器传过来的，因此不能置为初始值， 需要手动置空this.tmForm.id='';