除了对某个表基本的增删改查以外，可能需要额外的增加操作，这里是通过按钮来实现的

1、新增一个测试按钮 

测试

 2、这个按钮绑定一个方法test（），这个方法是为了弹出一个框，只需要修改this.dialogFormVisibleTest的dialogFormVisibleTest值即可（dialogFormVisibleTest 是弹窗的名称，可以理解为是id）

// 弹出测试窗口
test() {this.dialogFormVisibleTest = true;this.resetForm();
}

 3、定义dialogFormVisibleTest 这个弹窗的内容

  
取消确定

  上面的弹窗包括常见的四种类型，输入文本框、时间、多行文本、下拉框，然后标红了的都是需要根据业务需求进行修改的地方，这里特别注意prop和v-model中绑定的值是要一致并且跟后端接收的实体类的属性名称要一致，不然表单数据就赋值不了给那个实体类，也就是后端就拿不到前端传过来的值了

 这个弹窗还有在vue的data里定义一下

 这样弹窗才会有效果

4、编写handleTest方法 ，只需要根据业务修改红色画出来的地方就可

 到这里整个前端就改好了

5、后端定义与前端对应的实体类

package com.sd.sbmb.entity;import lombok.AllArgsConstructor;
import lombok.Data;import java.io.Serializable;
import java.util.Date;@Data
@AllArgsConstructor
public class Test implements Serializable {String code1;String code2;Integer xlk;String remark;Date time;
}

 6、写个控制器看看前端数据传给后端没

    //测试@RequestMapping("/handleTest")public Result handleTest(@RequestBody Test test){try {System.out.println(test);}catch (Exception e){return new Result(false,MessageConstant.EDIT_FAIL);}return new Result(true,MessageConstant.EDIT_SUCCESS);}