vue跟layui样式整合!大坑 - qq_37048894的博客 - CSDN博客

接下来,贴代码

  1. getPageData: function () {
  2. return sevice.pageQuery("/api/xxx/pageQuery", _this.param, function (data) {

  3. _this.pageData = data.data;

  4. _this.totalCount = data.total;

  5. layui.define(['laypage', 'layer', 'form'], function (exports) {

  6. _this.laypage = layui.laypage;

  7. _this.layer = layui.layer;

  8. _this.form.on("select(merchantid)", function (data) {

  9. _this.param.object.merchantid = data.value;

  10. _this.form.on("select(settlemonth)", function (data) {

  11. _this.param.object.settlemonth = data.value;

  12. _this.form.on("select(status)", function (data) {

  13. _this.param.object.status = data.value;

  14. exports('merchantMonthlySettle', {});

  15. , count: _this.totalCount,

  16. , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']

  17. ,curr:_this.param.pageNum || 1, jump: function (obj, first) {

  18. _this.param.pageNum = obj.curr;

  19. _this.param.pageSize = obj.limit;

  20. }, findAllMerchant: function () {

  21. url: '/api/xxx/findMerchantList',

  22. success: function (data) {

  23. _this.listMerchant = data.data

  24. batchUpdate: function () {

  25. if (_this.checkList.length == 0) {

  26. layer.msg('您未选择勾选', {icon: 1});

  27. var ids = _this.checkList;

  28. _this.layer.confirm('您确定要进行全部结算吗?', {

  29. url: '/api/xxx/batchUpdate',

  30. success: function (data) {

  31. layer.msg('结算成功', {icon: 1});

  32. layer.msg('结算失败', {icon: 2});

  33. checkedAll: function () {

  34. console.log(_this.checked);

  35. this.pageData.forEach(function (item, index) {

  36. _this.checkList.push(item.id);

  37. console.log(_this.checkList);

  38. handler: function (val, oldVal) {

  39. if (val.length === this.pageData.length) {

  40. }, created: function () {

页面

  1. <meta name="renderer" content="webkit">


  2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


  3. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">


  4. <script src="/res/layui/lay/modules/jquery.min.js"></script>


  5. <script src="/res/lib/vue.min.js"></script>


  6. <script src="/res/layui/layui.js"></script>


  7. <script src="/res/gui-framework.js"></script>


  8. <link rel="stylesheet" href="/res/layui/css/layui.css" media="all">


  9. <body layadmin-themealias="default">


  10. <div id="vueContainer" v-cloak>


  11. <div class="layui-fluid" style="margin-top: 20px">


  12. <div class="layui-row layui-col-space15">


  13. <div class="layui-col-md12">


  14. <div class="layui-card-header">商家分成管理


  • <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>


  • <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>


  • <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>


  • <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 class="layui-btn layuiadmin-btn-useradmin" @click="reset">


  • <i class="layui-icon layui-icon-refresh-1 layuiadmin-button-btn"></i>


  • <button class="layui-btn" id="add" data-type="add" @click="batchUpdate">一键结算</button>


  • <table class="layui-table" lay-filter="test">


  • <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 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>{{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>


  • <div id="pagination">


  • base: '/res/modules/merchant/'


  • }).use('merchantMonthlySettle');


讲解核心代码,

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

  1. base: '/res/modules/merchant/'

  2. }).use('merchantMonthlySettle');

这一段对应

  1. layui.define(['laypage', 'layer', 'form'], function (exports) {

  2. _this.laypage = layui.laypage;

  3. _this.layer = layui.layer;

  4. exports('merchantMonthlySettle', {});

为什么会有这么一段呢,是因为我们页面要进行模块化,,,如果你不需要,那对你无影响,可以去掉。

select绑定无效,我之前说过了,之所以我会写上v-model是因为他第二次有效。。。理解就是:编辑数据会回显绑定。
啊!!!
下班了,有空再写

本文由 黑白世界4648 第一时间收藏到GET,原文来自 → blog.csdn.net

「GetParty」

关注微信号,推送好文章

微信中长按图片即可关注

更多精选文章

评论
微博一键登入