vue跟layui样式整合！大坑

在你观看这篇文章前，我真的一点都不建议你layui的界面更vue.js混合使用。

如果你已经开始了，那当我没说过。

1. 添加第三方js,css
   
   常见的layui.all.js。vue.min.js、这些都是可以百度到的。没必要添链接了
   
   在页面中同时引入这两个文件
2. 修改页面样式，写代码
   这是我已经整合过的。
   
   
   编辑：
   
    
3. 接下来，贴代码

   //使用Vue渲染模板，初始化时是没有数据的，需要ajax请求拿到数据
   var vue = new Vue({
       el: "#vueContainer",
       data: {
           pageData: null,
           param: {
               pageNum: 1,
               pageSize: 10,
               object: {}
           },
           totalCount: 0,
           layui: {
               layer: null,
               laypage: null,
               form: null
           },
           checked: false, //全选框
           checkList: [],//多选框后数组
           falg: false,//标志是新增还是修改
           listMerchant: [],
       },
       updated: function () {
           var _this = this;
           if(_this.form){
           _this.form.render();
           _this.paging();}
       },
       methods: {
           getPageData: function () {
               var _this = this;
               console.log(_this.param)
               return sevice.pageQuery("/api/xxx/pageQuery", _this.param, function (data) {
                   if (data.code == 200) {
                       _this.pageData = data.data;
                       _this.totalCount = data.total;
                   } else {
                       _this.layer.msg("搜索失败");
                   }
               });  _this.checkList=[];
           },
           reset: function () {
               var _this = this;
               _this.param.object = {};
           },
           layuiInit: function () {
               var _this = this;
               //使用layui分页
               layui.define(['laypage', 'layer', 'form'], function (exports) {
                   _this.laypage = layui.laypage;
                   _this.layer = layui.layer;
                   _this.form = layui.form;
                   _this.paging();
                   _this.form.on("select(merchantid)", function (data) {
                       _this.param.object.merchantid = data.value;
                   });
                   _this.form.on("select(settlemonth)", function (data) {
                       _this.param.object.settlemonth = data.value;
                   });
                   _this.form.on("select(status)", function (data) {
                       _this.param.object.status = data.value;
                   });
                   // _this.form.on('checkbox(owneruserstype)', function(data){
                   //     console.log(data.value);
                   // });
                   exports('merchantMonthlySettle', {});
               });
           },
           paging:function(){
               var _this=this;
               _this.laypage.render({
                   elem: 'pagination'
                   , count: _this.totalCount,
                   limit: 10//每次显示的数量，（必须满足，不然不能点击下一页）
                   , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
   
                   ,curr:_this.param.pageNum || 1,  jump: function (obj, first) {
                       //点击非第一页页码时的处理逻辑。比如这里调用了ajax方法，异步获取分页数据
                       if (!first) {
                           _this.param.pageNum = obj.curr;
                           _this.param.pageSize = obj.limit;
                           _this.getPageData();//第二个参数不能用变量pageSize，因为当切换每页大小的时候会出问题
                       }
                   }
               });
           }, findAllMerchant: function () {
               var _this = this;
               $.ajax({
                   type: 'POST',
                   url: '/api/xxx/findMerchantList',
                   dataType: 'json',
                   data: null,
                   async: true,//这里设置为同步执行
                   success: function (data) {
                       if (data)
                           _this.listMerchant = data.data
                   }
               });
   
           },
           batchUpdate: function () {
               var _this = this;
               if (_this.checkList.length == 0) {
                   layer.msg('您未选择勾选', {icon: 1});
                   return;
               }
               var ids = _this.checkList;
   
               //询问框
               _this.layer.confirm('您确定要进行全部结算吗？', {
                   btn: ['确认', '取消'] //按钮
               }, function () {
                   $.ajax({
                       type: 'POST',
                       url: '/api/xxx/batchUpdate',
                       dataType: 'json',
                       data: {"ids": ids},
                       traditional: true,//这里设置为true
                       //这里设置为同步执行，目的是等数据加载完再调用layui分页组件，不然分页组件拿不到totalCount的值
                       success: function (data) {
                           if (data.code == 200) {
                               layer.msg('结算成功', {icon: 1});
                           } else {
                               layer.msg('结算失败', {icon: 2});
                           }
                           _this.getPageData();
                       }
   
                   });
               }, function () {
                   return
               });
   
   
           },
           checkedAll: function () {
               var _this = this;
               console.log(_this.checked);
               if (!_this.checked) { //实现反选
                   _this.checkList = [];
                   this.pageData.forEach(function (item, index) {
                       _this.checkList.push(item.id);
                   });
               } else { //实现全选
                   _this.checkList = [];
               }
               console.log(_this.checkList);
           }
       },
       watch: {
           'checkList': {
               handler: function (val, oldVal) {
                   if (val.length === this.pageData.length) {
                       this.checked = true;
                   } else {
                       this.checked = false;
                   }
               },
               deep: true
           }
       }, created: function () {
           var _this = this;
           //获取下拉框父数据
           _this.findAllMerchant();
           // _this.param.object=null;
           _this.getPageData();
           _this.layuiInit();
       }
   });

   页面
    

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="utf-8">
       <title>商家分成</title>
       <meta name="renderer" content="webkit">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <meta name="viewport"
             content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
   
       <script src="/res/layui/lay/modules/jquery.min.js"></script>
       <script src="/res/lib/vue.min.js"></script>
       <script src="/res/layui/layui.js"></script>
       <script src="/res/gui-framework.js"></script>
       <!--  <script src="/res/modules/price/pricePlans.js"></script>-->
       <link rel="stylesheet" href="/res/layui/css/layui.css" media="all">
   
       <style>
           /*属性选择器*/
           [v-cloak] {
               display: none;
           }
       </style>
   </head>
   <body layadmin-themealias="default">
   <div id="vueContainer" v-cloak>
       <div class="layui-fluid" style="margin-top: 20px">
           <div class="layui-row layui-col-space15">
               <div class="layui-col-md12">
                   <div class="layui-card">
                       <div class="layui-card-header">商家分成管理</div>
                       <div class="layui-card-body">
   
                           <div class="test-table-reload-btn" style="margin-bottom: 10px;display:flex">
                               <form class="layui-form" action="" lay-filter="component-form-element">
                                   <div class="layui-inline">
                                       <div class="layui-input-inline">
                                           <select  v-model="param.object.merchantid" lay-filter="merchantid">
                                               <option value="">商家名称</option>
                                               <option v-for="ls in listMerchant" :value="ls.id">{{ls.name}}</option>
                                               <option value=""></option>
                                           </select>
                                       </div>
                                   </div>
                                   <div class="layui-inline">
                                       <div class="layui-input-inline">
                                           <select v-model="param.object.settlemonth" lay-filter="settlemonth">
                                               <option value="">结算月份</option>
                                               <option value="1月">一月份</option>
                                               <option value="2月">二月份</option>
                                               <option value="3月">三月份</option>
                                               <option value="4月">四月份</option>
                                               <option value="5月">五月份</option>
                                               <option value="6月">六月份</option>
                                               <option value="7月">七月份</option>
                                               <option value="8月">八月份</option>
                                               <option value="9月">九月份</option>
                                               <option value="10月">十月份</option>
                                               <option value="11月">十一月份</option>
                                               <option value="12月">十二月份</option>
                                               <option value=""></option>
                                           </select>
                                       </div>
                                   </div>
                                   <div class="layui-inline">
                                       <div class="layui-input-inline">
                                           <select  v-model="param.object.status" lay-filter="status">
                                               <option value="">状态</option>
                                               <option value="0">未结算</option>
                                               <option value="1">已结算</option>
                                               <option value=""></option>
                                           </select>
                                       </div>
                                   </div>
                               </form>
                               <div class="layui-inline">
                                   <button class="layui-btn layuiadmin-btn-useradmin" @click="getPageData">
                                       <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                   </button>
                                   <button class="layui-btn layuiadmin-btn-useradmin" @click="reset">
                                       <i class="layui-icon layui-icon-refresh-1 layuiadmin-button-btn"></i>
                                   </button>
                               </div>
                           </div>
   
                       </div>
   
                       <div class="layui-row">
                           <hr/>
                           <button class="layui-btn" id="add" data-type="add" @click="batchUpdate">一键结算</button>
                       </div>
                       <!--列表-->
                       <table class="layui-table" lay-filter="test">
                           <thead>
                           <tr>
                               <th class="layui-table-cell "><input type="checkbox" v-model="checked" title="全选"
                                                                    @click='checkedAll'></th>
                               <th class="layui-table-cell ">商家名称</th>
                               <th class="layui-table-cell ">分成类型</th>
                               <th class="layui-table-cell ">销售总额</th>
                               <th class="layui-table-cell ">分成比例</th>
                               <th class="layui-table-cell ">分成金额</th>
                               <th class="layui-table-cell ">结算月份</th>
                               <th class="layui-table-cell ">状态</th>
                               <th class="layui-table-cell ">结算人</th>
                               <th class="layui-table-cell ">结算时间</th>
                               <th class="layui-table-cell ">操作</th>
                           </tr>
                           </thead>
                           <tbody>
                           <tr v-for="item in pageData">
                               <td><input type="checkbox" v-model="checkList" :value="item.id"></td>
                               <td>{{item.merchantname}}</td>
                               <td>{{item.pushtype}}</td>
                               <td>{{item.saleamount}}</td>
                               <td>{{item.pushratio}}</td>
                               <td>{{item.pushamount}}</td>
                               <td>{{item.settlemonth}}</td>
                               <td v-if="item.status==0">未结算</td>
                               <td v-else>已结算</td>
                               <td>{{item.username}}</td>
                               <td>{{item.settletime}}</td>
                               <td v-if="item.status==0">
                                   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                                      @click="updateObject(item.id)">结算</a>
                               </td>
                           </tr>
                           </tbody>
                       </table>
                       <!--分页容器-->
                       <div id="pagination"></div>
                   </div>
   
               </div>
           </div>
       </div>
   </div>
   </body>
   
   <script>
       layui.config({
           base: '/res/modules/merchant/' //静态资源所在路径
       }).use('merchantMonthlySettle');
   </script>
   </html>

   这么说吧，layui的样式封装对vue非常不友好，在layui里面有这样一段话。
   在layui的from表单里面这些属性你使用双向绑定是无效的，初始无效，后面赋值有效，浅显的理解就是，你created拉回来的数据绑不上去，然后你修改数据后他又生效了，这点我也有点f**k.
   
   以上属性你如果要用layui的样式，那就无法双向绑定，切记
   由于我们框架限制，无法使用layui以外的样式，所以才造成这样的结果！
   
    

4. 讲解核心代码，

    updated: function () {
           var _this = this;
           if(_this.form){
           _this.form.render();
           _this.paging();
           }
       },

   vue的生命周期中，updated里面的方法如果发生改变就会重新渲染页面，在这里，我将页面进行了监听渲染，还将分页进行了监听渲染，关于分页，这里也有点坑，vue整合后的crud。。。新增，删除分页有点问题，我已经解决了。下面我会讲。
    

   
   <script>
       layui.config({
           base: '/res/modules/merchant/' //静态资源所在路径
       }).use('merchantMonthlySettle');
   </script>

   这一段对应
    

     layuiInit: function () {
               var _this = this;
               //使用layui分页
               layui.define(['laypage', 'layer', 'form'], function (exports) {
                   _this.laypage = layui.laypage;
                   _this.layer = layui.layer;
                   _this.form = layui.form;
                   _this.paging();
            
                   exports('merchantMonthlySettle', {});
               });
           },

   为什么会有这么一段呢，是因为我们页面要进行模块化，，，如果你不需要，那对你无影响，可以去掉。
   
   select绑定无效，我之前说过了，之所以我会写上v-model是因为他第二次有效。。。理解就是：编辑数据会回显绑定。
   啊！！！
   下班了，有空再写