vue中弹窗与按钮问题

一、弹窗组件：

<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" >
</el-dialog>

• title表示弹窗标题，此值可自定义
• visible.sync表示是否开启弹窗，true表示是，false表示否

下面代码表示通过在弹窗组件中嵌套表单，点击添加按钮出发弹窗，如下：

<el-button type="primary" icon="el-icon-circle-plus-outline" @click="openadd()">添加</el-button>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" >
      <el-form ref="formFile" :model="formFile" :rules="rules"  label-width="80px">
        <el-form-item label="系统类型" prop="system_type">
          <el-input v-model.number="formFile.system_type" placeholder="请输入系统类型" clearable  />
        </el-form-item>
        <el-form-item label="IP地址" prop="ip_address">
          <el-input v-model="formFile.ip_address" clearable placeholder="请输入IP地址" />
        </el-form-item>
	<el-form-item label="主机名" prop="hostname">
          <el-input v-model="formFile.hostname" placeholder="请输入主机名" clearable />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="formFile.remarks" placeholder="请输入备注信息" clearable />
        </el-form-item>
	<el-form-item label="创建人" prop="created">
          <el-input v-model="formFile.created" placeholder="请输入创建人" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="Add">确 定</el-button>
      </span>
  </el-dialog>

从上述代码可以看出，点击添加后，实际是调用openadd()触发事件，打开弹窗

二、表格组件：

本例子以密码本平台为例子，表格内容如下：

<el-table
    :data="tableData"
    border
    style="width: 100%,height:100%">
    <el-table-column
    type="selection"
    width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="ID"
      width="100"
      align="center">
    </el-table-column>
    <el-table-column
      prop="system_type"
      label="system"
      width="150"
      align="center">
    </el-table-column>
    <el-table-column
      prop="ip_address"
      label="IP地址"
      width="250"
      align="center">
    </el-table-column>
    <el-table-column
      prop="hostname"
      label="主机名"
      width="150"
      align="center">
    </el-table-column>
    <el-table-column
      prop="created"
      label="创建人"
      width="150"
      align="center">
    </el-table-column>
    <el-table-column
      prop="remarks"
      label="备注"
      align="center">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="300"
      align="center">
      <template slot-scope="scope">
        <el-button  type="primary" size="small" @click="handleClick('helloworld')">查看</el-button>
        <el-button type="primary" size="small" @click="openadd(scope.row)">编辑</el-button>
        <el-button type="primary" size="small" @click="handledelete(scope.row)">删除</el-button>
	</template>
      </el-table-column>
  </el-table>

• label：表示定义表格中的列名，也就是页面显示的名字
• prop：要与后台返回的数据中的json数据的key名一样，只有一样才可以获取key对应的值
• scope.row：表示获取表格当前行的数据，注意是表格数据，不是表单

在页面中可以看到添加和编辑按钮如图所示：

说明：表格中id字段的值是通过后端接口中实时获取的数据库的id字段

三、上面点击添加后，弹出表单弹出进行数据新增，点击编辑后，重新编辑数据，那么如何实现点击添加和点击编辑调用同一个弹窗，然后点击弹窗确定按钮后又调用不同的后端接口实现新增和修改呢？

1、首先定义变量，ifMaterialEdit，indexVar，并设置初始值为0，如图：

注：主要通过ifMaterialEdit实现的调用同一个弹窗实现不同功能，设定当此值为0的时候实现编辑，为1 的时候实现新增，indexVar主要用来获取id传递到后端接口实现编辑功能

2、点击添加或者编辑按钮后，将调用openadd()函数，在openadd()中进行判断，如图：

从上图中可以看出，openadd(row)中的row表示数据，点击添加没有传递row，但是点击编辑传递了row，因此通过if(row)来判断是否存在数据，如果存在，那么打开弹窗并设置ifMaterialEdit=0，dialogTitle表示设置弹窗标题为编辑，formFile表示设置编辑弹窗的时候显示内容，也就是未编辑之前的当前内容, row.system_type表示获取表格中每个字段的对应值，indexVar获取的是表格中的id字段的值，else 表示否则，那么调用新增的逻辑，打开弹窗，设置变量为1，设置表格标题

点击按钮后提示如下：

3、点击确定按钮后，调用Add()函数，此时就可以根据设置的ifMaterialEdit的值来判断指定逻辑了，如图：

从上图可以看出，当ifMaterialEdit=1的时候调用的是添加的逻辑，通过this.formFile.system_type获取表单中输入的数据，调用addip()函数实现添加，添加后通过this.reload()刷新页面，当ifMaterialEdit=0的时候，调用编辑逻辑，同样获取表单中写入的数据，调用editip()实现编辑，注意，此时editip()中为两个参数，第一参数表示要向接口中传递的数据fromData1，this.indexVar表示获取的表格中当前行的id信息(已设置变量并且在openadd()中设置了值)，因为后端接口是根据id的值来修改对应数据库中的内容，因此要将id的值传递过去

接口函数所在位置为：src/api/ip.js，内容如下：

注意：函数需要导入才可使用，在script中导入，如图：

上图中的import也可以一次性可以导入多个，如下：

import { addip,getip,editip,deleteip } from '@/api/ip'

附加：

scope.$index表示表格当前行的索引，从0开始，第一行的索引为0，以此类推

scope.row表示表格当前行的数据