1.html

<table class="table table-hover">
    <thead> 
      <tr> 
        <th style="width: 50px;" id="cts"> 
        <div class="checkbox d-inline"> 
             <input type="checkbox" name="fhcheckbox" id="zcheckbox"> 
             <label  style="max-height: 12px;" for="zcheckbox" class="cr"></label> 
             </div> 
                </th> 
        <th style="width: 50px;">NO</th> 
        <th>名称</th> 
        <th>权限标识</th> 
        <th>备注</th> 
        <th>操作</th> 
        </tr> 
       </thead> 
    <tbody> 
        <!-- 开始循环 -->    
        <template v-for="(data,index) in varList"> 
        <tr> 
            <td><div class="checkbox d-inline"><input type="checkbox" v-bind:id="'zcheckbox'+index" name='ids' v-bind:value="data.FHBUTTON_ID"<label  style="max-height: 12px;" v-bind:for="'zcheckbox'+index" class="cr"></label></div> 
            </td> 
            <td scope="row">{{page.showCount*(page.currentPage-1)+index+1}}</td> 
            <td>{{data.NAME}}</td> 
            <td>{{data.SHIRO_KEY}}</td> 
            <td>{{data.BZ}}</td> 
            <td> 
                <a v-show="edit" title="修改" v-on:click="goEdit(data.FHBUTTON_ID);" style="cursor:pointer;"><i class="feather icon-edit-2"></i></a> 
                <a v-show="del" title="删除" v-on:click="goDel(data.FHBUTTON_ID);" style="cursor:pointer;"><i class="feather icon-x"></i></a> 
            </td> 
        </tr> 
        </template> 
        <tr v-show="varList.length==0"> 
            <td colspan="10">没有相关数据</td> 
        </tr> 
    </tbody> 
   </table>

2.js代码

var vm = new Vue({
    el: '#app',

    data:{
        varList: [],    //list 
        page: [],        //分页类 
        pd: []            //map
    },

    methods: {

        //初始执行 
        init() {
            //复选框控制全选,全不选 
            $('#zcheckbox').click(function(){
                 if($(this).is(':checked')){
                     $("input[name='ids']").click();
                 }else{
                     $("input[name='ids']").attr("checked", false);
                 }
            });
            this.getList();
        },

        //获取列表 
        getList: function(){
            this.loading = true;
            $.ajax({
                xhrFields: {
                    withCredentials: true
                },
                type: "POST",
                url: httpurl+'fhbutton/list?showCount='+this.showCount+'&currentPage='+this.currentPage,
                data: {KEYWORDS:this.pd.KEYWORDS,tm:new Date().getTime()},
                dataType:"json",
                success: function(data){
                 if("success" == data.result){
                     vm.varList = data.varList;
                     vm.page = data.page;
                     vm.pd = data.pd;
                     vm.hasButton();
                     vm.loading = false;
                     $("input[name='ids']").attr("checked", false);
                 }else if ("exception" == data.result){
                     showException("按钮模块",data.exception);//显示异常
                 }
                }
            }).done().fail(function(){
                swal("登录失效!", "请求服务器无响应，稍后再试", "warning");
                setTimeout(function () {
                    window.location.href = "../../login.html";
                }, 2000);
            });
        }

    },

    mounted(){
        this.init();
    }
})

3.后台代码

package org.fh.controller.system;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.fh.controller.base.BaseController;
import org.fh.entity.Page;
import org.fh.entity.PageData;
import org.fh.service.system.FHlogService;
import org.fh.service.system.FhButtonService;
import org.fh.util.Jurisdiction;
import org.fh.util.Tools;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * 说明：按钮管理处理类
 * 作者：FH Admin
 * from：fhadmin.cn
 */
@Controller
@RequestMapping("/fhbutton")
public class FhbuttonController extends BaseController {

    @Autowired 
    private FhButtonService fhButtonService;
    @Autowired 
    private FHlogService FHLOG;

    /**列表
     * @param page
     * @throws Exception
     */ 
    @RequestMapping(value="/list", produces="application/json;charset=UTF-8") 
    @RequiresPermissions("fhbutton:list") 
    @ResponseBody 
    public Object list(Page page) throws Exception{
        Map<String,Object> map = new HashMap<String,Object>();
        String errInfo = "success";
        PageData pd = new PageData();
        pd = this.getPageData();
        String KEYWORDS = pd.getString("KEYWORDS");                //关键词检索条件 
        if(Tools.notEmpty(KEYWORDS)){
            pd.put("KEYWORDS", KEYWORDS.trim());
        }
        page.setPd(pd);
        List<PageData>    varList = fhButtonService.list(page);    //列出Fhbutton列表
        map.put("varList", varList);
        map.put("page", page);
        map.put("pd", pd);
        map.put("result", errInfo);
        return map;
    }

}