<%@ taglib prefix="emp" uri="http://www...._.net vue+ele ui 项目demo">
devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

VUE+ELEMENT UI学习demo_.net vue+ele ui 项目demo

作者：凡人多烦事01 | 2024-03-24 05:13:13

赞

踩

.net vue+ele ui 项目demo

 这几天，看了下vue+element ui的一些知识，现在将其写成一个demo，页面下过如下

代码如下：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
  2. <%@ taglib prefix="emp" uri="http://www.montnets.com/emp/i18n/tags/simple" %>
  3. <%@include file="/common/common.jsp" %>
  4. <%
  5.     String iPath = request.getRequestURI().substring(0, request.getRequestURI().lastIndexOf("/"));
  6.     String inheritPath = iPath.substring(0, iPath.lastIndexOf("/"));
  7.     String commonPath = inheritPath.substring(0, inheritPath.lastIndexOf("/"));
  8.     String skinPath = session.getAttribute("stlyeSkin") == null ? "default" : (String) session.getAttribute("stlyeSkin");
  9.     String version = skinPath.contains("frame3.0") ? "v3" : skinPath.contains("frame4.0") ? "v4" : "v2";
  10.     int index = skinPath.lastIndexOf("/");
  11.     String skin = version + "-" + skinPath.substring(index + 1);
  12. %>
  13. <!doctype html>
  14. <style>
  15.     .top_btn {
  16.         margin-bottom: 40px;
  17.     }
  18.     .top_left_btn {
  19.         margin-left: 5px;
  20.         float: left;
  21.         display: block;
  22.         margin-bottom: 10px;
  23.     }
  24.     .top_right_btn {
  25.         margin-right: 5px;
  26.         float: right;
  27.         display: block;
  28.         margin-bottom: 10px;
  29.     }
  30.  
  31.     .bottom {
  32.         margin-top: 25px;
  33.         float: right;
  34.     }
  35. </style>
  36. <html lang="en">
  37. <head>
  38.     <title>签约信息查询vue练习
  39.     </title>
  40.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  41.     <link href="<%=commonPath%>/common/css/frame.css?V=<%=StaticValue.getJspImpVersion() %>" rel="stylesheet"
  42.           type="text/css"/>
  43.     <link href="<%=skinPath %>/frame.css?V=<%=StaticValue.getJspImpVersion() %>" rel="stylesheet" type="text/css"/>
  44.     <link href="<%=commonPath%>/common/css/vue/index.css?V=<%=StaticValue.getJspImpVersion() %>" rel="stylesheet"
  45.           type="text/css"/>
  46.     <link href="<%=commonPath%>/common/css/vue/index<%="-" + skin%>.css?V=<%=StaticValue.getJspImpVersion() %>"
  47.           rel="stylesheet"
  48.           type="text/css"/>
  49.     <link href="<%=commonPath%>/common/css/vue/iview.css?V=<%=StaticValue.getJspImpVersion() %>" rel="stylesheet"
  50.           type="text/css"/>
  51.     <title>Title</title>
  52. </head>
  53. <body>
  54. <div id="container" class="container" > 
  55.  <%-- container与js中el属性对应的值保持一致--%>
  56.     <span v-html="position"></span>    
  57.   <%-- v-html表示要展示的html，position为后台传输过来的值，需要在js中定义--%>
  58.     <div id="rContent" class="rContent"
  59.          v-if="access"     
  60.          style="margin-left:1.5rem;width: 95%"> 
  61.  <%-- v-if表示只有当满足条件时，才展示div中的东西，access同样为js中定义的属性，可以由后台传值--%>
  62.         <div class="top_btn">
  63.             <div class="top_left_btn">
  64.                 <el-button type="primary" size="mini" @click="add">新增
  65.                 </el-button> 
  66.   <%--@为v-on标签的缩写，表示给当前页面上的事件进行绑定，add为定义的方法 --%>
  67.             </div>
  68.             <div class="top_right_btn">
  69.                 <el-switch
  70.                         v-model="isSearch"
  71.                         active-color="#13ce66"
  72.                         inactive-color="#ff4949"
  73.                         active-text="显示搜索"
  74.                         inactive-text="隐藏搜索">
  75.                 </el-switch>  
  76. <%--v-model实现属性值绑定，isSearch为js中定义的值，可以由后台传输--%>
  77.             </div>
  78.         </div>
  79.         <el-card class="box-card" style="margin-bottom: 0.8rem; width: 100%" v-if="isSearch" shadow="hover">
  80.             <el-form :inline="true" label-width="90px"
  81.                      class="mmsTplForm" style="width: 1000px; margin-left: 2%;padding: 14px 0 5px 0 ; float: left"
  82.                      size="mini"
  83.                      label-position="left">
  84.                 <el-form-item label="账号:">
  85.                     <el-input v-model="criteria.acctNo" clearable placeholder="账号" style="width: 195px"/>
  86.                 </el-form-item>
  87.                 <el-form-item label="手机号码:">
  88.                     <el-input v-model="criteria.phoneNo" clearable placeholder="手机号码" style="width: 195px"/>
  89.                 </el-form-item> 
  90.  <%--criteria为后台定义的查询对象，acctNo和phoNo查询对象的属性--%>
  91.             </el-form>
  92.             <el-container>
  93.                 <el-header style="padding: 14px 0 5px 0" height="70px">
  94.                     <el-button style="float: left;" type="primary" @click="getQuery" size="mini"
  95.                                icon="el-icon-search">查询
  96.                     </el-button>
  97.                 </el-header>
  98.             </el-container>
  99.         </el-card>
  100.         <!--------------------------------------------- 表格代码 --------------------------------------------->
  101.         <el-card class="box-card" shadow="hover">
  102.             <el-table
  103.                     size="mini"
  104.                     :empty-text="emptyText"
  105.                     :data="tableData"
  106.                     v-loading="loading"
  107.                     style="width: 100%;">
  108.      <%--:data等价于V-bind data，v-bind简写为：，实现属性值绑定，emptyText，tableData，loding都为js中定义的属性值--%>
  109.                 <el-table-column
  110.                         align="center"
  111.                         prop="cucuno"
  112.                         label="客户号">
  113.                 </el-table-column>
  114.                 <el-table-column
  115.                         align="center"
  116.                         prop="cutlno"
  117.                         label="电话号码">
  118.                 </el-table-column>
  119.                 <el-table-column
  120.                         align="center"
  121.                         prop="cuopnt"
  122.                         label="开机构代号">
  123.                 </el-table-column>
  124.      <%--prop为element ui中实现表单属性绑定的属性，cucuno，cutlno，cuopnt为后台定义前端页面展示Vo类的属性值--%>           
  125.                 <el-table-column
  126.                         align="center"
  127.                         width="350"
  128.                         label="操作">
  129.                     <template slot-scope="scope123" v-if="scope123.row.id != 1 && scope123.row.id != 2 && scope123.row.id != 3">
  130.                       <%--scope123为自己在jsp中随意定义的值--%>  
  131.                       <el-button type="success" size="small" @click="edit(scope123.row)">编辑</el-button>
  132.                         <el-popover
  133.                                 :ref="scope123.row.id"
  134.                                 placement="top"
  135.                                 width="180">
  136.                             <p>确定删除本条数据吗？</p>
  137.                             <div style="text-align: right; margin: 0">
  138.                                 <el-button size="mini" type="text" @click="$refs[scope123.row.id].doClose()">取消
  139.                                 </el-button>
  140.                                  <%--doClose（）方法为vue中原生方法--%>
  141.                                 <el-button :loading="delLoading" type="primary" size="mini"
  142.                                            @click="subDelete(scope123.row.id)">确定
  143.                                 </el-button>
  144.                             </div>
  145.                             <el-button slot="reference" type="danger" size="mini">删除</el-button>
  146.                         </el-popover>
  147.                     </template>
  148.                 </el-table-column>
  149.             </el-table>
  150.         </el-card>
  151.         <!-- 新增编辑弹出框-->
  152.         <el-dialog top="150px" :close-on-click-modal="false" :title="isAdd ? '新增' : '编辑'" :visible.sync="isShow" width="500px" :show-close="false">
  153.             <%--isAdd，isShow为js中定义属性值，用来判断from表单的title是新增还是编辑，表单是否展示--%>
  154.             <el-form ref="testForm" :inline="true" :model="testForm" :rules="rules" size="small" label-width="150px">
  155.                 <%--rules为js中自定义的表单校验规则，testForm为js中自定义的表单属性--%>
  156.                 <el-form-item label="客户号:">
  157.                     <el-input v-model="testForm.cucuno" placeholder="输入客户号" oninput="value=value.replace(/[^a-zA-Z0-9]/ig,'')"/>
  158.                 </el-form-item>
  159.                 <%--v-model = "testForm.cucuno 表示绑定testForm表单中的cucuno属性"--%>
  160.                 <el-form-item label="电话号码:" >
  161.                     <el-input  v-model="testForm.cutlno" placeholder="输入电话号码" oninput="value=value.replace(/[^\d]/g, '')"/>
  162.                 </el-form-item>
  163.                 <el-form-item label="开户机构代码:">
  164.                     <el-input  v-model="testForm.cuopnt" placeholder="输入开户机代号" oninput="value=value.replace(/[^a-zA-Z0-9]/ig,'')"/>
  165.                 </el-form-item>
  166.                 <el-form-item label="备注:">
  167.                     <el-input   v-model="testForm.remark"  placeholder="请输入中文备注" onkeyup="value=value.replace(/[^\u4e00-\u9fa5]/g,'')"/>
  168.                 </el-form-item>
  169.             </el-form>
  170.             <div slot="footer" class="dialog-footer">
  171.                 <el-button type="text" @click="cancel">取消</el-button>
  172.                 <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
  173.             </div>
  174.         </el-dialog>
  175.         <%--分页--%>
  176.         <div class="bottom">
  177.             <el-pagination
  178.                     @size-change="handlePageSize"
  179.                     @current-change="handlePage"
  180.                     :current-page.sync="pageInfo.pageIndex"
  181.                     :page-sizes="pageInfo.pageSizeOpts"
  182.                     :page-size="pageInfo.pageSize"
  183.                     layout="total, sizes, prev, pager, next, jumper"
  184.                     :total="pageInfo.totalRec">
  185.             </el-pagination>
  186.         </div>
  187.     </div>
  188. </div>
  189. <script type="text/javascript">
  190.     document.write("<scr" + "ipt src=\"<%=commonPath%>/common/js/myjquery-a.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
  191. </script>
  192. <script src="<%=commonPath %>/common/js/common.js?V=<%=StaticValue.getJspImpVersion() %>"></script>
  193. <script src="<%=commonPath%>/common/i18n/i18nUtil.js"></script>
  194. <script type="text/javascript">
  195.     if (browserData() !== -1) {
  196.         document.write("<scr" + "ipt src=\"<%=commonPath%>/common/js/vue/babel.min.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
  197.     }
  198. </script>
  199. <script type="text/javascript">
  200.     if (browserData() !== -1) {
  201.         document.write("<scr" + "ipt src=\"<%=commonPath%>/common/js/vue/browser-polyfill.min.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
  202.     }
  203. </script>
  204. <script type="text/javascript">
  205.     document.write("<scr" + "ipt src=\"<%=commonPath%>/common/js/vue/vue.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
  206. </script>
  207. <script type="text/javascript">
  208.     document.write("<scr" + "ipt src=\"<%=commonPath%>/common/js/vue/index.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
  209. </script>
  210. <script type="text/javascript">
  211.     if (browserData() === -1) {
  212.         document.write("<scr" + "ipt src=\"<%=iPath %>/test.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
  213.     }
  214. </script>
  215. <script src="<%=iPath %>/test.js?V=<%=StaticValue.getJspImpVersion() %>"
  216.         type="text/babel"></script>
  217. </body>
  218. </html>

 

js

  1. $(function () {
  2.   new Vue({
  3.         el: "#container",    //绑定jsp中div的id，可以理解为开始绑定vue
  4.         data: {              //data为定义jsp页面中需要的一些数据
  5.             isSearch: true,
  6.             isShow: false,
  7.             isAdd : true,
  8.             testForm: {
  9.                 id: '',
  10.                 cucuno: '',
  11.                 cutlno: '',
  12.                 cuopnt:'',
  13.                 remark:''
  14.             },
  15.             // 校验规则
  16.             rules: {
  17.                 cucuno: [
  18.                     {required: true, message: '请输入客户号号', trigger: 'blur'},
  19.                     {min: 3, max: 3, message: '长度 3 个字符', trigger: 'blur'}
  20.                 ],
  21.                 cutlno: [
  22.                     {required: true, message: '请输入电话号码', trigger: 'blur'},
  23.                     {min: 6, max: 6, message: '长度在 6 个字符', trigger: 'blur'}
  24.                 ],
  25.                 cuopnt:[
  26.                     {required: true, message: '请输入客户号', trigger: 'blur'},
  27.                     {min: 3, max: 3, message: '长度在 3 个字符', trigger: 'blur'}
  28.                 ]
  29.             },
  30.             pageInfo: {
  31.                 pageIndex: 1, // 当前页数
  32.                 totalRec: 0, //数据总数
  33.                 pageSize: 15,   // 每页条数
  34.                 pageSizeOpts: [5, 10, 15, 20, 50],   // 每页条数切换的配置
  35.                 totalPage: 0 // 总页数
  36.             },
  37.             // 查询条件
  38.             criteria: {
  39.                 phoneNo: "",
  40.                 acctNo: ""
  41.             },
  42.             loading: false,
  43.             tableColumns: [],
  44.             tableData: [],
  45.             access: false,
  46.             menuCode: '',
  47.             position: '',
  48.             emptyText: "请点击查询获取数据",
  49.             delLoading: false
  50.         },
  51.         //钩子函数，vue所写页面，自动加载时执行这路面定义的属性
  52.         created: function () {
  53.             this.getInitData()
  54.             this.getQuery()
  55.         },
  56.         //统一采用 _this 去 指向 this
  57.         methods: {
  58.             // 获取初始化参数的方法
  59.             getInitData() {
  60.                 let _this = this
  61.                 $.ajax({
  62.                     type: "POST",
  63.                     url: 'que_siginInfomation.htm',
  64.                     data: "method=initData",
  65.                     dataType: 'json',
  66.                     async: false,
  67.                     success: function (result) {
  68.                         if (result) {
  69.                             let data = result.data
  70.                             _this.menuCode = data['menuCode']
  71.                             _this.position = data['position']
  72.                             _this.access = data['access']
  73.                         }
  74.                     },
  75.                     error: function () {
  76.                         _this.$message.error('很抱歉,连接异常!')
  77.                     }
  78.                 })
  79.             },
  80.             getQuery() {
  81.                 let _this = this;
  82.                 let query = {
  83.                     pageInfo: _this.pageInfo,
  84.                     criteria: _this.criteria
  85.                 }
  86.                 _this.loading = true
  87.                 $.ajax({
  88.                     type: "POST",
  89.                     url: 'que_siginInfomation.htm?method=query',
  90.                     data: JSON.stringify(query),
  91.                     dataType: 'json',
  92.                     contentType: "application/json",
  93.                     success: function (result) {
  94.                         if (result) {
  95.                             let data = result.data
  96.                             _this.tableData = data['data']
  97.                             _this.pageInfo.totalPage = data['totalPage']
  98.                             _this.pageInfo.totalRec = data['total']
  99.                         }
  100.                         _this.loading = false
  101.                     },
  102.                     error: function () {
  103.                         _this.loading = false
  104.                         _this.$message.error('很抱歉,连接异常!')
  105.                     }
  106.                 });
  107.             },
  108.             // 打开 add 页面
  109.             add() {
  110.                 this.testForm = {
  111.                     id: '',
  112.                     cucuno: '',
  113.                     cutlno: '',
  114.                     cuopnt:'',
  115.                     remark:''
  116.                 }
  117.                 this.isShow = true
  118.             },
  119.             cancel() {
  120.                 this.isShow = false
  121.             },
  122.             doSubmit() {
  123.                 this.loading = true
  124.                 this.$refs['testForm'].validate((valid) => {
  125.                     if (valid) {
  126.                         alert("新增成功");
  127.                         this.loading = false
  128.                         this.isShow = false
  129.                         // 对页面进行刷新
  130.                         this.getQuery()
  131.                     } else {
  132.                         alert("参数校验不通过");
  133.                         this.loading = false
  134.                          return false
  135.                      }
  136.             })
  137.             },
  138.             subDelete(id) {
  139.                 this.delLoading = true
  140.                 alert("删除成功id为"+id+"的数据");
  141.                 this.$refs[id].doClose()
  142.                 this.delLoading = false
  143.                 this.getQuery()
  144.             },
  145.             edit(row) {
  146.                 this.testForm = {
  147.                     id: row.id,
  148.                     cucuno: row.cucuno,
  149.                     cutlno: row.cutlno,
  150.                     cuopnt: row.cuopnt,
  151.                     remark:''
  152.                 }
  153.                 this.isAdd = false
  154.                 this.isShow = true
  155.             },
  156.             // 更改分页
  157.             handlePage(value) {
  158.                 this.pageInfo.pageIndex = value
  159.                 this.getQuery()
  160.             },
  161.             handlePageSize(value) {
  162.                 this.pageInfo.pageSize = value
  163.                 this.getQuery()
  164.             }
  165.         }
  166.     })
  167. })
  168.  
  169.

 

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/300084
推荐阅读