vue跟layui样式整合！大坑

在你观看这篇文章前，我真的一点都不建议你layui的界面更vue.js混合使用。如果你已经开始了，那当我没说过。添加第三方js,css常见的layui.all.js。vue.min.js、这些都是可以百度到的。没必要添链接了在页面中同时引入这两个文件修改页面样式，写代码这是我已经整合过的。编辑：接下来，贴代码//使用Vue渲染模板，初始化时是没有数据的，...

慢慢慢慢慢

28497人浏览 · 2019-04-30 18:33:10

慢慢慢慢慢 · 2019-04-30 18:33:10 发布

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

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

添加第三方js,css

常见的layui.all.js。vue.min.js、这些都是可以百度到的。没必要添链接了

在页面中同时引入这两个文件
修改页面样式，写代码
这是我已经整合过的。

编辑：

接下来，贴代码

//使用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以外的样式，所以才造成这样的结果！

讲解核心代码，

 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是因为他第二次有效。。。理解就是：编辑数据会回显绑定。
啊！！！
下班了，有空再写

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^