Vue+ElementUI
关注
分享
扫一扫
主要介绍基于Vue+ElementUI的功能实现
lovoo
不要抱怨生活，只因你还不够努力！
展开
-
Vue Router使用示例
Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）映射表：[内网ip1:电脑标识1，内网ip2:电脑标识2]路由器 -> 公网IP -> 映射表 -> 内网IP。创建文件夹 router，创建index.html。特点：单页Web应用，预先加载页面内容。路由包括路由和转发。原创 2023-03-31 21:47:55 · 932 阅读 · 0 评论 -
Vue使用computed实现计算属性的单向绑定和双向绑定
目的：修改姓名时，修改全名，修改全名时也会修改姓名信息2、在data中定义属性firstName、lastName3、在computed中计算属性fullName1 = firstName + lastName4、在fullName2对应的input中修改数据时，同时修改firstName与lastName值，这里要用到get与set方法。对value值进行切割，分别赋予firstName与lastName原创 2023-03-30 21:26:20 · 1115 阅读 · 0 评论 -
vue页面跳转，并在tab上显示名称
接收差数 products : this.$route.query.products。勾选商品，点击打印时，携带商品信息参数跳转到打印页面，并在tab上显示标签名称。跳转使用 this.$router.push。isTab: true 表示跳转后在tab栏显示。原创 2023-03-29 10:05:31 · 645 阅读 · 0 评论 -
ElementUI页面中，JS数组删除子数组的两种方法
data() {return {leftDataList: [ ] , //左边表格数据leftDataListSelections: [ ] , //左边表格选中数据rightDataList: [ ] , //右侧表格数据 } } , .. .. . }原创 2023-03-28 09:55:43 · 434 阅读 · 0 评论 -
Vue+ElementUI+SpringBOOT实现多条件复杂查询
data() {return {queryDates: [ ] , //保存日期信息key: null, //主表搜索queryField: null, //查询字段itemKey: null, //明细查询内容queryItemField: null, //明细查询字段payType: null, //支付方式 类型saleUser: null, //营业员selectField: null, //选择查询字段selectValue: null, //选择查询值。原创 2023-03-20 10:59:11 · 3647 阅读 · 0 评论 -
Vue+EleMentUI实现el-table-colum表格select下拉框可编辑
data() {return {suppliers: [ ] , //保存供应商数据showInput: "" , //用来判断是否显示哪个单元格oldData: {} , //用来存修改前的数据} , //用来保存新的数据 } } ,// 通过自定义指令实现的表单自动获得光标的操作focus: {原创 2023-03-14 17:30:52 · 5100 阅读 · 3 评论 -
elementUI el-table 单元格实现复制
然后创建如下拷贝方法。原创 2023-03-13 16:47:20 · 2037 阅读 · 0 评论 -
elementUI技巧：在 el-table中校验el-input输入框
说明：列表必须在dataForm中定义，el-input必须使用el-form-item包裹。原创 2023-03-07 17:24:10 · 97 阅读 · 0 评论 -
表单中el-select、el-date-picker和el-input的长度不一致解决办法
当它们一起使用时，一般select长度是默认的，会比input短，只需要设置其宽度是100%即可。同理，el-date-picker也是类似的，但有所差别。然后设置其宽度是100%原创 2023-03-02 14:10:09 · 4808 阅读 · 3 评论 -
解决Vue控制台出现的sockjs-node/info?t= net::ERR_CONNECTION_TIMED_OUT异常
首先 sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。配置 devServer （UP推荐方式）原创 2023-03-02 13:58:13 · 3439 阅读 · 1 评论 -
基于HBuilder的Vue模板、Get模板和Post模板
将最下面代码直接复制到然后只要在空白处输入 vue， httpget，httppost就会出现代码片断{ "vue全局模板": { "prefix": "vue", "body": [ "<template>", "<div></div>", "</template>", "", "<script转载 2021-06-16 10:18:42 · 597 阅读 · 0 评论 -
VueJS(2)--创建工程
1、打开git命令窗口2、当前目录下创建工程$ vue init webpack vueproject3、转到vueproject目录, 安装相关文件$ npm install４、运行$ run npm dev—————————————————————————————————————————————————–java架构师项目实战,高并发集群分布式,大数据高可用视频教程，共760G下载地址：htt原创 2017-09-29 22:19:14 · 349 阅读 · 0 评论 -
VueJS(5)---初步练习(5题)
<%@ page contentType="text/html;charset=UTF-8" language="java" %><script src="https://unpkg.com/vue"></script><html><head> <title>Title</title></head><body>-----------------------------------原创 2017-10-27 14:59:22 · 1169 阅读 · 0 评论 -
VueJS(1)--安装
1、下载node.jshttp://nodejs.cn/npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 新版的nodejs已经集成了npm，所原创 2017-09-29 21:11:29 · 310 阅读 · 0 评论 -
基于Vue的ElementUI级联显示以及数据回显
前言在我们做项目时，可能会遇到许多树形展示的数据，在编辑时要求选择当前数据所在的上级，这时就要用到级联，如图：如何实现这种功能？在这里分三部份来说明，数据及实体类，前端展示，后台数据查询。一、创建相关实体类及数据表1、创建商品分类表：CREATE TABLE `mall_pms`.`pms_category` ( `cat_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '分类id', `name` char(50) CHARACTER S原创 2021-06-20 11:10:21 · 5154 阅读 · 0 评论 -
基于Vue的ElementUI项目实现父子组件信息传递
前言如项目中有一个产品分类的树形组件，在分类属性组件中引入之后，要实现点击左侧的树节点，更新右端的表格，这种功能如何实现呢？如图：1、子组件：1.1、在el-tree节点上加上 @node-click="nodeClick"1.2、实现方法中使用this.$emit进行数据提交，nodeClick(data, node, component){ //向父组件发送数据请求 console.log(data, node, component) this.$e原创 2021-06-19 16:49:54 · 1510 阅读 · 0 评论 -
HBuilder快速配置Vue代码块
1、打开”工具“–>" 代码块设置"–>"Vue代码块”如图：2、将如下代码复制到右边的"自定义代码块“窗口中首先要把原代码清除或注释，然后粘贴保存{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div>", "</template>\n", "&l原创 2021-06-14 15:54:25 · 1584 阅读 · 0 评论 -
VueJS(3)---基本文件格式
<template> <div id="app"> <img src="./assets/logo.png"> <router-view></router-view> </div></template><script>export default { name: 'app'}</script><style>#app { font-family: 'Aveni原创 2017-10-08 20:48:17 · 2463 阅读 · 0 评论 -
VueJS(4)---图片绑定
1、加载数据public String detail() { jsonRoot.put("data", service.detail(ad.getId() == null ? -1 : ad.getId())); jsonRoot.put("success", true); return SUCCESS;}2、请求数据 1）主页点击标题跳转到明细：<a h原创 2017-10-16 09:50:13 · 1267 阅读 · 0 评论 -
Vue+ElementUI实现表格点击修改时间
2.3）给表格添加编辑事件@cell-click=“tableDbEdit” @cell-dblclick=“tableDbEdit”2.1）定义变量showInput、oldData、currentData。2.2）通过自定义指令实现的表单自动获得光标的操作。2.4） 当input失去光标后进行的操作。原创 2023-02-27 10:27:11 · 486 阅读 · 1 评论