vue-admin-template 添加、修改对话框-马育民老师

# 说明

点击【添加】按钮的步骤：

1. v-bind，绑定  对话框 标题的值，修改 该值
2. 让对话显示

点击【修改】按钮的步骤：

1. v-bind，绑定  对话框 标题的值，修改 该值
2. 让对话显示
3. 调用 request() 发送 ajax请求，请求另一个  .json，然后回显到控件中

问题（bug）：

1. 先点击【修改】，会显示数据，然后关闭
2. 然后点击 【添加】，会显示上一次的数据

解决：点击 【添加】 按钮时，清空数据（重置数据）

# 代码

### 对话框

```
<el-dialog :title="contactDialogTitle" :visible.sync="dialogFormVisible">
    <el-form  :model="form" label-width="120px"  :rules="rules">
    <el-row>
        <el-col :span="12">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="姓名"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
        <el-radio :label="0">女</el-radio>
        <el-radio :label="1">男</el-radio>
        </el-radio-group>
    </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <el-form-item label="身份证号" prop="idcard">
                <el-input v-model="form.idcard" placeholder="身份证号"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="年龄">
                <el-input-number v-model="form.age"></el-input-number>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <el-form-item label="电话号码" prop="phone">
                <el-input v-model="form.phone" placeholder="电话号码"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="接触来源">
                <el-input v-model="form.origin" placeholder="接触来源"></el-input>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <el-form-item label="隔离地址">
                <el-input v-model="form.place" placeholder="隔离地址"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="隔离开始时间">
                <el-date-picker type="date" placeholder="隔离开始时间" v-model="form.date" style="width: 100%;"></el-date-picker>
            </el-form-item>
        </el-col>
    </el-row>
    <el-form-item label="住址">
        <el-input v-model="form.adress" placeholder="住址"></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="doSubmit">确 定</el-button>
</div>
</el-dialog>
```

数据：
```
data(){
    return {
        dialogFormVisible: false,
        form: {},
        formLabelWidth: '120px',
        contactDialogTitle:'添加', // 变量可以不用这个，但是要见名知意
        rules:{
            name: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'change' }
          ],
            idcard: [
                { required: true, message: '请输入身份证号', trigger: 'blur' },
                { min: 18, max: 18, message: '长度是 18 个字符', trigger: 'change' }
            ],
            phone: [
                { required: true, message: '请输入手机号码', trigger: 'blur' },
                { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
                {
                  pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                  message: '请输入正确的手机号码'
                }
        ]
        }
    }
},
```

### 添加按钮

添加按钮代码：

```
<el-button type="primary" plain @click="showContactAdd">添加</el-button>
```

添加按钮函数：

```
// 添加按钮函数
showContactAdd(){
    //显示对话框
    this.dialogFormVisible = true
    // 如果不加此行代码，当点击 【编辑】 按钮后，contactDialogTitle的值改为 [修改]
    // 再次点击 【添加】 按钮，对话框还是显示 [修改]
    this.contactDialogTitle = '添加'
    /*
    * 问题（bug）：
    * 1. 先点击【修改】，会显示数据，然后关闭
    * 2. 然后点击 【添加】，会显示上一次的数据
    * 
    * 解决：将 form 对象的值置为空
    */
    // this.form = {} // 给 form 赋 {} 对象，
    this.form = {
        "name":"",
        "idcard":"",
        "gender":undefined,
        "phone":"",
        "origin":"",
        "adress":"",
        "place":"",
        "date": "",
        "age":undefined
    }
},
```

### 修改按钮

添加按钮代码：

```
<el-button plain size="mini" @click="showContactModify" prop="modify">编辑</el-button>
```

添加按钮函数：

```
showContactModify(){
    //第一步：显示对话框
    this.dialogFormVisible = true
    this.contactDialogTitle = '修改'
    request({
        url: '../contact_modify.json',
        method: 'get',
    }).then(response =>{
        this.form = response.data
    })
},
```

原文出处：http://malaoshi.top/show_1IX3ITmmypJO.html