Vue前端+Java后端：根据查询条件，分页查询列表展示

• el-form标签中添加属性:inline=“true”，使el-form-item横向分布。
• el-form标签中添加属性:model=“listQuery”，绑定表单数据对象。
• 查询输入框就可以绑定绑定表单数据对象的某个元素，实现输入赋给该元素。
• 按钮，输入框等各放在一个el-form-item即可。
• 代码：
  template

         
           
         
         
           获取列表
         
         
           重置
         

script - 开始

const defaultListQuery = {
 keyword1: null,
 pageSize: 10,
 pageNum: 1
}

script - export default中

data() {
    return {
      listQuery: Object.assign({}, defaultListQuery), // 将defaultListQuery赋给{}，返回值为赋值后的对象
    }
  },
methods: {
    handleSearchFrag() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleResetFrag() {
      this.listQuery = Object.assign({}, defaultListQuery)
      this.getList()
    },
    getList() {
      this.listloading = true
      console.log(this.listQuery)
      this.$http.get('http://localhost:8080/missileTarget/fragList', { params: {
        groupNum: this.listQuery['keyword1'], pageSize: this.listQuery['pageSize'], pageNum: this.listQuery['pageNum']
      }},
      { headers: { 'Content-Type': 'application/json' }}).then((response) => {
        if (response.data.code === 200) {
          this.$message({
            type: 'success',
            message: '成功'
          })
          console.log(response.data)
          this.listloadingFrag = false
          this.tableData = response.data.data.list
          this.total = response.data.data.total
        } else {
          this.$message({
            type: 'error',
            message: '失败'
          })
        }
      })
    }
}

• el-table标签中添加属性ref="multipleTableFrag"，即给此dom结点即给这个table命名，后面需要一些操作（清除table中所选item等操作）可以直接用this.$refs.multipleTableFrag定位到这个table对其进行操作。
• el-table中添加v-loading="listloadingFrag"属性，当table的数据变化时会显示加载效果，成功获取数据后加载效果消失，显示数据。需要在data(){}中写listloadingFrag = false，请求数据的方法开始的时候让listloadingFrag = true，成功请求到数据后让listloadingFrag = false。
• el-table中添加:data="tableDataFrag"属性，绑定显示的数据。在data(){}中写tableDataFrag: null,，请求数据的方法中写this.tableDataFrag = response.data.data.list。注意，属性前带冒号冒号为v-bind的缩写，表示会动态变化的值，如果静态则不用冒号。
• el-table-column中的prop属性，与获取的list中的对应属性名一样即可实现相应显示。注意大小写。
• 代码

• .sync实现数据双向绑定，因为el-form和el-pagination均需要改变listQuery的数据。
• 代码

getFragList() {
      this.listloading = true
      console.log(this.listQuery)
      this.$http.get('http://localhost:8080/missileTarget/fragList', { params: {
        groupNum: this.listQuery['keyword1'], pageSize: this.listQuery['pageSize'], pageNum: this.listQuery['pageNum']
      }},
      { headers: { 'Content-Type': 'application/json' }}).then((response) => {
        if (response.data.code === 200) {
          this.$message({
            type: 'success',
            message: '成功'
          })
          console.log(response.data)
          this.listloading = false
          this.tableDataFrag = response.data.data.list
          this.total = response.data.data.total
        } else {
          this.$message({
            type: 'error',
            message: '失败'
          })
        }
      })
    },

样例1：keyword只有一个且为Int类型

@ApiOperation("根据组数获取破片列表")
    @GetMapping("fragList")
    @ResponseBody
    public CommonResult> fragList(@RequestParam(value = "groupNum") Integer keyword1,
                                               @RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize,
                                               @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum) {
        PageHelper.startPage(pageNum, pageSize);
        FragmentExample example = new FragmentExample();
        if (keyword1 == null)
            example.createCriteria().getAllCriteria();
        else
            example.createCriteria().andGroupNumEqualTo(keyword1);
        List fragmentList = fragmentMapper.selectByExample(example);
        System.out.println(fragmentList);
        return CommonResult.success(CommonPage.restPage(fragmentList));
    }

样例2：keyword有两个且为String类型（注意判断空的方式）

@ApiOperation("根据操作者和目标名分页获取目标列表")
    @GetMapping("targetList")
    @ResponseBody
    public CommonResult> targetList(@RequestParam(value = "keyword1") String keyword1,
                                                   @RequestParam(value = "keyword2") String keyword2,
                                                   @RequestParam(value = "pageSize", defaultValue = "5") Integer pageSize,
                                                   @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum) {
        PageHelper.startPage(pageNum, pageSize);
        TargetExample example = new TargetExample();
        if (StringUtils.isEmpty(keyword1) && StringUtils.isEmpty(keyword2))
            example.createCriteria().getAllCriteria();
        else if(!StringUtils.isEmpty(keyword1) && StringUtils.isEmpty(keyword2))
            example.createCriteria().andNameEqualTo(keyword1);
        else if(StringUtils.isEmpty(keyword1) && !StringUtils.isEmpty(keyword2))
            example.createCriteria().andUserEqualTo(keyword2);
        else
            example.createCriteria().andNameEqualTo(keyword1).andUserEqualTo(keyword2);
        List targetList = targetMapper.selectByExample(example);
        System.out.println(targetList);
        return CommonResult.success(CommonPage.restPage(targetList));
    }

用response.data.data.list获取列表。