VUE+ELEMENT UI学习demo

最新推荐文章于 2024-05-07 08:23:30 发布
最新推荐文章于 2024-05-07 08:23:30 发布
阅读量769 收藏
点赞数
分类专栏： vue学习 文章标签： vue ELEMENT UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bird_tp/article/details/103593961
版权

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

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="emp" uri="http://www.montnets.com/emp/i18n/tags/simple" %>
<%@include file="/common/common.jsp" %>
<%
    String iPath = request.getRequestURI().substring(0, request.getRequestURI().lastIndexOf("/"));
    String inheritPath = iPath.substring(0, iPath.lastIndexOf("/"));
    String commonPath = inheritPath.substring(0, inheritPath.lastIndexOf("/"));
    String skinPath = session.getAttribute("stlyeSkin") == null ? "default" : (String) session.getAttribute("stlyeSkin");
    String version = skinPath.contains("frame3.0") ? "v3" : skinPath.contains("frame4.0") ? "v4" : "v2";
    int index = skinPath.lastIndexOf("/");
    String skin = version + "-" + skinPath.substring(index + 1);
%>
<!doctype html>
<style>
    .top_btn {
        margin-bottom: 40px;
    }
    .top_left_btn {
        margin-left: 5px;
        float: left;
        display: block;
        margin-bottom: 10px;
    }
    .top_right_btn {
        margin-right: 5px;
        float: right;
        display: block;
        margin-bottom: 10px;
    }

    .bottom {
        margin-top: 25px;
        float: right;
    }
</style>
<html lang="en">
<head>
    <title>签约信息查询vue练习
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="<%=commonPath%>/common/css/frame.css?V=<%=StaticValue.getJspImpVersion() %>" rel="stylesheet"
          type="text/css"/>
    <link href="<%=skinPath %>/frame.css?V=<%=StaticValue.getJspImpVersion() %>" rel="stylesheet" type="text/css"/>
    <link href="<%=commonPath%>/common/css/vue/index.css?V=<%=StaticValue.getJspImpVersion() %>" rel="stylesheet"
          type="text/css"/>
    <link href="<%=commonPath%>/common/css/vue/index<%="-" + skin%>.css?V=<%=StaticValue.getJspImpVersion() %>"
          rel="stylesheet"
          type="text/css"/>
    <link href="<%=commonPath%>/common/css/vue/iview.css?V=<%=StaticValue.getJspImpVersion() %>" rel="stylesheet"
          type="text/css"/>
    <title>Title</title>
</head>
<body>
<div id="container" class="container" > 
 <%-- container与js中el属性对应的值保持一致--%>
    <span v-html="position"></span>    
  <%-- v-html表示要展示的html，position为后台传输过来的值，需要在js中定义--%>
    <div id="rContent" class="rContent"
         v-if="access"     
         style="margin-left:1.5rem;width: 95%"> 
 <%-- v-if表示只有当满足条件时，才展示div中的东西，access同样为js中定义的属性，可以由后台传值--%>
        <div class="top_btn">
            <div class="top_left_btn">
                <el-button type="primary" size="mini" @click="add">新增
                </el-button> 
  <%--@为v-on标签的缩写，表示给当前页面上的事件进行绑定，add为定义的方法 --%>
            </div>
            <div class="top_right_btn">
                <el-switch
                        v-model="isSearch"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="显示搜索"
                        inactive-text="隐藏搜索">
                </el-switch>  
<%--v-model实现属性值绑定，isSearch为js中定义的值，可以由后台传输--%>
            </div>
        </div>
        <el-card class="box-card" style="margin-bottom: 0.8rem; width: 100%" v-if="isSearch" shadow="hover">
            <el-form :inline="true" label-width="90px"
                     class="mmsTplForm" style="width: 1000px; margin-left: 2%;padding: 14px 0 5px 0 ; float: left"
                     size="mini"
                     label-position="left">
                <el-form-item label="账号:">
                    <el-input v-model="criteria.acctNo" clearable placeholder="账号" style="width: 195px"/>
                </el-form-item>
                <el-form-item label="手机号码:">
                    <el-input v-model="criteria.phoneNo" clearable placeholder="手机号码" style="width: 195px"/>
                </el-form-item> 
 <%--criteria为后台定义的查询对象，acctNo和phoNo查询对象的属性--%>
            </el-form>
            <el-container>
                <el-header style="padding: 14px 0 5px 0" height="70px">
                    <el-button style="float: left;" type="primary" @click="getQuery" size="mini"
                               icon="el-icon-search">查询
                    </el-button>
                </el-header>
            </el-container>
        </el-card>
        <!--------------------------------------------- 表格代码 --------------------------------------------->
        <el-card class="box-card" shadow="hover">
            <el-table
                    size="mini"
                    :empty-text="emptyText"
                    :data="tableData"
                    v-loading="loading"
                    style="width: 100%;">
     <%--:data等价于V-bind data，v-bind简写为：，实现属性值绑定，emptyText，tableData，loding都为js中定义的属性值--%>
                <el-table-column
                        align="center"
                        prop="cucuno"
                        label="客户号">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="cutlno"
                        label="电话号码">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="cuopnt"
                        label="开机构代号">
                </el-table-column>
     <%--prop为element ui中实现表单属性绑定的属性，cucuno，cutlno，cuopnt为后台定义前端页面展示Vo类的属性值--%>           
                <el-table-column
                        align="center"
                        width="350"
                        label="操作">
                    <template slot-scope="scope123" v-if="scope123.row.id != 1 && scope123.row.id != 2 && scope123.row.id != 3">
                      <%--scope123为自己在jsp中随意定义的值--%>  
                      <el-button type="success" size="small" @click="edit(scope123.row)">编辑</el-button>
                        <el-popover
                                :ref="scope123.row.id"
                                placement="top"
                                width="180">
                            <p>确定删除本条数据吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="$refs[scope123.row.id].doClose()">取消
                                </el-button>
                                 <%--doClose（）方法为vue中原生方法--%>
                                <el-button :loading="delLoading" type="primary" size="mini"
                                           @click="subDelete(scope123.row.id)">确定
                                </el-button>
                            </div>
                            <el-button slot="reference" type="danger" size="mini">删除</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 新增编辑弹出框-->
        <el-dialog top="150px" :close-on-click-modal="false" :title="isAdd ? '新增' : '编辑'" :visible.sync="isShow" width="500px" :show-close="false">
            <%--isAdd，isShow为js中定义属性值，用来判断from表单的title是新增还是编辑，表单是否展示--%>
            <el-form ref="testForm" :inline="true" :model="testForm" :rules="rules" size="small" label-width="150px">
                <%--rules为js中自定义的表单校验规则，testForm为js中自定义的表单属性--%>
                <el-form-item label="客户号:">
                    <el-input v-model="testForm.cucuno" placeholder="输入客户号" oninput="value=value.replace(/[^a-zA-Z0-9]/ig,'')"/>
                </el-form-item>
                <%--v-model = "testForm.cucuno 表示绑定testForm表单中的cucuno属性"--%>
                <el-form-item label="电话号码:" >
                    <el-input  v-model="testForm.cutlno" placeholder="输入电话号码" oninput="value=value.replace(/[^\d]/g, '')"/>
                </el-form-item>
                <el-form-item label="开户机构代码:">
                    <el-input  v-model="testForm.cuopnt" placeholder="输入开户机代号" oninput="value=value.replace(/[^a-zA-Z0-9]/ig,'')"/>
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input   v-model="testForm.remark"  placeholder="请输入中文备注" onkeyup="value=value.replace(/[^\u4e00-\u9fa5]/g,'')"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="cancel">取消</el-button>
                <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
            </div>
        </el-dialog>
        <%--分页--%>
        <div class="bottom">
            <el-pagination
                    @size-change="handlePageSize"
                    @current-change="handlePage"
                    :current-page.sync="pageInfo.pageIndex"
                    :page-sizes="pageInfo.pageSizeOpts"
                    :page-size="pageInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageInfo.totalRec">
            </el-pagination>
        </div>
    </div>
</div>
<script type="text/javascript">
    document.write("<scr" + "ipt src=\"<%=commonPath%>/common/js/myjquery-a.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
</script>
<script src="<%=commonPath %>/common/js/common.js?V=<%=StaticValue.getJspImpVersion() %>"></script>
<script src="<%=commonPath%>/common/i18n/i18nUtil.js"></script>
<script type="text/javascript">
    if (browserData() !== -1) {
        document.write("<scr" + "ipt src=\"<%=commonPath%>/common/js/vue/babel.min.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
    }
</script>
<script type="text/javascript">
    if (browserData() !== -1) {
        document.write("<scr" + "ipt src=\"<%=commonPath%>/common/js/vue/browser-polyfill.min.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
    }
</script>
<script type="text/javascript">
    document.write("<scr" + "ipt src=\"<%=commonPath%>/common/js/vue/vue.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
</script>
<script type="text/javascript">
    document.write("<scr" + "ipt src=\"<%=commonPath%>/common/js/vue/index.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
</script>
<script type="text/javascript">
    if (browserData() === -1) {
        document.write("<scr" + "ipt src=\"<%=iPath %>/test.js?V=<%=StaticValue.getJspImpVersion() %>\"></sc" + "ript>")
    }
</script>
<script src="<%=iPath %>/test.js?V=<%=StaticValue.getJspImpVersion() %>"
        type="text/babel"></script>
</body>
</html>

 

js

$(function () {
  new Vue({
        el: "#container",    //绑定jsp中div的id，可以理解为开始绑定vue
        data: {              //data为定义jsp页面中需要的一些数据
            isSearch: true,
            isShow: false,
            isAdd : true,
            testForm: {
                id: '',
                cucuno: '',
                cutlno: '',
                cuopnt:'',
                remark:''
            },
            // 校验规则
            rules: {
                cucuno: [
                    {required: true, message: '请输入客户号号', trigger: 'blur'},
                    {min: 3, max: 3, message: '长度 3 个字符', trigger: 'blur'}
                ],
                cutlno: [
                    {required: true, message: '请输入电话号码', trigger: 'blur'},
                    {min: 6, max: 6, message: '长度在 6 个字符', trigger: 'blur'}
                ],
                cuopnt:[
                    {required: true, message: '请输入客户号', trigger: 'blur'},
                    {min: 3, max: 3, message: '长度在 3 个字符', trigger: 'blur'}
                ]
            },
            pageInfo: {
                pageIndex: 1, // 当前页数
                totalRec: 0, //数据总数
                pageSize: 15,   // 每页条数
                pageSizeOpts: [5, 10, 15, 20, 50],   // 每页条数切换的配置
                totalPage: 0 // 总页数
            },
            // 查询条件
            criteria: {
                phoneNo: "",
                acctNo: ""
            },
            loading: false,
            tableColumns: [],
            tableData: [],
            access: false,
            menuCode: '',
            position: '',
            emptyText: "请点击查询获取数据",
            delLoading: false
        },
        //钩子函数，vue所写页面，自动加载时执行这路面定义的属性
        created: function () {
            this.getInitData()
            this.getQuery()
        },
        //统一采用 _this 去 指向 this
        methods: {
            // 获取初始化参数的方法
            getInitData() {
                let _this = this
                $.ajax({
                    type: "POST",
                    url: 'que_siginInfomation.htm',
                    data: "method=initData",
                    dataType: 'json',
                    async: false,
                    success: function (result) {
                        if (result) {
                            let data = result.data
                            _this.menuCode = data['menuCode']
                            _this.position = data['position']
                            _this.access = data['access']
                        }
                    },
                    error: function () {
                        _this.$message.error('很抱歉,连接异常!')
                    }
                })
            },
            getQuery() {
                let _this = this;
                let query = {
                    pageInfo: _this.pageInfo,
                    criteria: _this.criteria
                }
                _this.loading = true
                $.ajax({
                    type: "POST",
                    url: 'que_siginInfomation.htm?method=query',
                    data: JSON.stringify(query),
                    dataType: 'json',
                    contentType: "application/json",
                    success: function (result) {
                        if (result) {
                            let data = result.data
                            _this.tableData = data['data']
                            _this.pageInfo.totalPage = data['totalPage']
                            _this.pageInfo.totalRec = data['total']
                        }
                        _this.loading = false
                    },
                    error: function () {
                        _this.loading = false
                        _this.$message.error('很抱歉,连接异常!')
                    }
                });
            },
            // 打开 add 页面
            add() {
                this.testForm = {
                    id: '',
                    cucuno: '',
                    cutlno: '',
                    cuopnt:'',
                    remark:''
                }
                this.isShow = true
            },
            cancel() {
                this.isShow = false
            },
            doSubmit() {
                this.loading = true
                this.$refs['testForm'].validate((valid) => {
                    if (valid) {
                        alert("新增成功");
                        this.loading = false
                        this.isShow = false
                        // 对页面进行刷新
                        this.getQuery()
                    } else {
                        alert("参数校验不通过");
                        this.loading = false
                         return false
                     }
            })
            },
            subDelete(id) {
                this.delLoading = true
                alert("删除成功id为"+id+"的数据");
                this.$refs[id].doClose()
                this.delLoading = false
                this.getQuery()
            },
            edit(row) {
                this.testForm = {
                    id: row.id,
                    cucuno: row.cucuno,
                    cutlno: row.cutlno,
                    cuopnt: row.cuopnt,
                    remark:''
                }
                this.isAdd = false
                this.isShow = true
            },
            // 更改分页
            handlePage(value) {
                this.pageInfo.pageIndex = value
                this.getQuery()
            },
            handlePageSize(value) {
                this.pageInfo.pageSize = value
                this.getQuery()
            }
        }
    })
})

 

 

 

 

bird_tp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ElementUI+VUE案例，demo
ZhangYuesong0923的博客
07-29 473
<template> <div id="app" style="margin-top: 20px;" v-cloak> <el-col> <el-form ref="form" :model="form" label-width="100px" :inline="true"> <el-form-item label="阿啊实打实达"> <el-input v-model="form.
elementUI upload 上传 传参
weixin_30684743的博客
08-24 761
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" mult...
2024年最全SpingBoot + Vue + Element UI + Echarts 整合的小 Demo，零基础前端开发
最新发布
2401_84616339的博客
05-07 933
el-button @click=“fruitDelete(scope.row)” type=“text” size=“small”>删除。编辑。立即修改。取消。Spring Boot 工程。
Vue elementui 实现表格selection的默认勾选
gis_zhouda的博客
12-07 6989
需求：弹出一个选择框，表格有勾选框，数据填充后，某些行设置默认勾选。 如下图： 数据填充后默认是不勾选的，如果要勾选某些行，通过toggleRowSelection this.$refs.zttable.toggleRowSelection(this.ZHUANTIList[i]); vue中dom和数据是绑定的，通过修改数据就能够实现对视图的修改，但是视图（dom）的更新是异步的，并不是修改了数据，视图会接着刷新。此时就用到了$nextTick,延迟回调，会将回调延迟到下次 DOM 更新..
element 在弹框上loading加载
小聪的博客
01-22 4299
element 在弹框上loading加载 在需要弹出的元素上加 <el-table :data="tableData.data" stripe style="width: 100%" v-loading="fullscreenLoading" element-loading-text="正在加载数据" :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50" ele
elementUI中dialog踩坑
wuxeek的博客
12-03 1万+
开发过程中遇到两点问题： 1、修改dialog的custom-class不生效； 2、定制validate规则的时候，无法获取正确的this对象 对于第一个问题，可以从图中知道，虽然笔者已经设置了dialog的custom-class，实际渲染过程中也元素也确实具有custom-class中的类，但是样式就是不生效。 dialog-width的具体样式如下： 即设置了dialog...
vue+element-ui demo
09-29
这是一个vue+element-ui的demo 里面有菜单menu组件，是我做的一个后台管理的模板，用到了route路由转向，以及子父组件方法的调用传参等等，如果是想用vue搭建后台的，可以直接使用 使用方法： cd vue-admin-master-...
vue+element ui搭建的DEMO增删改查+分页+导出
02-16
本DEMO是基于Vue.js和Element UI搭建的一个基础应用，实现了数据管理的基本操作：增、删、改、查以及分页和数据导出功能。对于初学者来说，这是一个很好的实践项目，可以加深对Vue.js和Element UI的理解。 首先，...
Vue + Element-ui后台管理系统模板.zip
06-04
这个“Vue + Element-ui后台管理系统模板”项目，利用 Vue CLI（Vue.js 的命令行工具）来初始化和管理项目。Vue CLI 提供了一套完整的脚手架，可以快速生成项目结构，包括路由、状态管理、单元测试等，使得开发者...
vue+element_ui后台demo
08-26
标题"vue+element_ui后台demo"表明这是一个使用Vue.js和Element UI搭建的后台系统示例项目。这样的项目通常会包含登录、权限管理、表格、表单、通知、布局等多种功能模块，用于展示如何在实际开发中运用这两项技术。...
Vue+Element UI环境搭建1
08-04
在构建前端应用的过程中，Vue.js 是一款非常流行的轻量级框架，而Element UI则是一个基于Vue.js的高质量UI组件库，常用于企业级后台管理系统的界面设计。在本篇文章中，我们将逐步介绍如何搭建一个使用Vue.js和...
vue + elementUI 项目搭建Demo
12-05
使用vue-cli脚手架搭建vue + elementUI 小案例，功能代码不多，主要包括vue项目目录的创建、elementUI的引入、前端路由、i18n国际化语言、scss、引入iconfont
vue实现在表格里,取每行的id的方法
11-28
如下所示： 1、在template上写上 slot-scope=”scope” 2、然后在template里边的标签上，scope.row.id 以上这篇vue实现在表格里,取每行的id的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
jsp中使用vuejs+element-ui+vuejs第三方组件
02-17
jsp中使用vuejs+element-ui+vuejs第三方组件
vue页面增加Loading效果，基于Element-UI的Loading效果
weixin_39876518的博客
08-29 2428
以Vue-Echarts举例 一、在v-chart标签里面添加代码 <v-chart :options="option" :autoresize="true" v-loading="loading"></v-chart> 二、在组件内引入Element-UI的Loading import { Loading } from 'element-ui' 三、再组件data里面增加属性及属性值loading: true 四、在方法里面写代码，关于组件的..
Vue+ElementUI中 el-dialog弹框蒙层问题
qq_37819505的博客
01-26 1636
开发项目时 页面中用到了2个<el-dialog></el-dialog>弹框（或者是dialog中再嵌套dialog），会出现2个灰色蒙版层叠加，需要再点一下蒙层才会消失。 用一个属性解决 :append-to-body="true" 详情转官网：https://element.eleme.cn/#/zh-CN/component/dialog ...
Vue中请求接口使用elementUI的loading的显示功能
weixin_44021888的博客
08-01 1880
Vue中请求接口使用elementUI的loading的显示功能
el-loading在el-dialog上使用
热门推荐
qq_34815188的博客
08-31 1万+
使用v-loading指令方式，因为Dialog的最外层元素是全屏，故遮罩为全屏。使用服务方式时，传入dialog DOM 节点，遮罩在dialog处。
element-ui —— table 前端缓存手动改变列宽值
c601757850的博客
05-08 1653
用vue-cli做项目，引用elementUI组件，实现如下列表。 要求记录用户手动改变的列宽，后台记录的话还要建库存储，就让前端缓存记录。 前端本地存储技术在 H5本地存储—sessionStorage 中已经提及，这里不再多说。 根据element UI table文档我们发现可以通过header-dragend事件来获取列宽改变的一些信息 实现思路 在每次改变列宽的时候都记录一下当前dom所有列宽值，在再次进入页面时赋值上去 在期间会遇到两个坑 localStorage存的是..
vue+element ui 多文件上传
11-02
在Vue和Element UI中实现多文件上传可以使用el-upload组件。具体步骤如下： 1. 在template中使用el-upload组件，设置multiple属性为true，即可实现多文件上传。 2. 在methods中定义handleUpload方法，用于处理上传文件的逻辑。 3. 在handleUpload方法中，使用FormData对象将上传的文件数据封装成表单数据，然后通过axios或者其他网络请求库将表单数据发送到后端进行处理。 代码示例： <template> <el-upload class="upload-demo" action="/upload" :multiple="true" :on-success="handleUpload" :before-upload="beforeUpload"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> <script> export default { methods: { handleUpload(response, file, fileList) { // 处理上传文件的逻辑 }, beforeUpload(file) { // 文件上传前的校验逻辑 } } } </script>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值