vue跟layui样式整合！大坑

在你观看这篇文章前，我真的一点都不建议你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跟layui样式整合！大坑相关推荐

Vue和layUI的区别何在？
vue和layui的区别: 1.vue是一套用于构建用户界面的渐进式JavaScript框架,layui是一款采用自身模块规范编写的前端UI框架: 2.vue会负责数据和视图的绑定,数据和视图是关联的 ...
五十九、Vue中的样式绑定
@Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...
Vue 中英文组件样式写法
Vue 中英文组件样式写法 Vue 项目国际化样式处理一.全局(main.js)添加自定义指令: v-lang 会自动添加语言对应的 class [中:zh,英:en] Vue.direct ...
vue和layUi对比
vue和layUi对比 vue(angular,react)这些框架会负责数据和视图的绑定,数据变了,视图自动更新,视图发生事件,也会更新数据,很省事.layui(bootstrap, extjs)这 ...
vue的scoped 样式隔离，样式穿透，及细节
先说环境吧:vue 3.2.45,也试过vue 3.2.16 vue的scoped样式隔离原理: 在当前组件的.vue文件中,如果style标签加了scoped属性,那么在组件渲染为DOM时,会对每 ...
视频教程-Springboot+Vue前后的分离整合项目实战-Java
Springboot+Vue前后的分离整合项目实战 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独特的培训思路,培训体系 ...
15 Vue中子组件样式的绑定和行内样式模版编写
[基础]模板样式绑定2-进阶场景子组件的样式绑定如何区分父子组件子组件使用样式的小坑行内样式的编写场景这篇文章继续学习Vue的模板样式绑定.上篇文章你已经对Vue中的样式绑定有一个基本了 ...
前端之vue的CSS样式
vue的CSS样式 vue项目的结构 Vue的三种样式化方法: 外部CSS文件样式向单个文件组件添加全局样式单个组件内部的样式相关名称: CSS预处理器(如SCSS)或后处理器(如PostCSS ...
Vue绑定Class样式
Vue绑定Class样式 vue有一个控制样式的小技巧,适用于单个或多个元素需要多种风格样式的切换. 我们可以先准备一个基本样式,以及之后需要切换的多种样式类型 <style>.basic ...

vue跟layui样式整合！大坑

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

vue跟layui样式整合！大坑相关推荐

最新文章

热门文章