1.  页面引入 vue.js 

<!-- vue --><script src="../../../assets/js-vue/vue.js"></script>

2. js 代码

var vm = new Vue({el: '#app',data:{varList: [],//listpage: [],//分页类pd: [],//mapshowCount: -1,//每页显示条数(这个是系统设置里面配置的，初始为-1即可，固定此写法)currentPage: 1,//当前页码add:false,del:false,edit:false,loading:false//加载状态    },    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. html 代码片段

<!-- 开始循环 --><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   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);" ><i class="feather icon-edit-2"></i></a><a v-show="del" title="删除" v-on:click="goDel(data.FHBUTTON_ID);" ><i class="feather icon-x"></i></a> </td></tr></template>

4.后台代码

/**列表 from www.1b23.com * @param page * @throws Exception */@RequestMapping(value="/list", produces="application/json;charset=UTF-8")@RequiresPermissions("fhbutton:list")@ResponseBodypublic 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;}