vue后台管理系统
小小liang
一个在深圳捡破烂的前端
展开
-
vue之ele组件中的select下拉 绑定对象值
ele中下拉绑定 对象原创 2022-06-20 15:37:33 · 584 阅读 · 1 评论 -
vue之中 axios的取消 上一次等待的请求(同一个请求,不同参数)
axios干掉上一次等待的请求转载 2022-06-17 17:37:51 · 589 阅读 · 0 评论 -
vue之 上传 excel文件
一个上传 excel的文件功能原创 2022-06-09 14:33:49 · 3176 阅读 · 0 评论 -
vue之动态路由 使用后台接口时候 不符合url、跳转到404页面
1原创 2022-06-08 15:40:23 · 350 阅读 · 0 评论 -
vue之vue-cli4热更新
目录vue之vue-cli4热更新vue.config.jsonpackage.jsonvue之vue-cli4热更新下载:yarn add --save-dev webpack-dev-servervue.config.jsonvar path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack: config原创 2022-05-06 17:18:34 · 1329 阅读 · 0 评论 -
vue之ele中el-checkbox-group复选框组件的使用
目录vue之ele中el-checkbox-group复选框组件的使用Home.vueSetTeam.vuevue之ele中el-checkbox-group复选框组件的使用Home.vue<!--描述: 作者:xzl 时间:05月05日160944--><template> <div> <div>checkedId - {{ checkedId }}</div> <el-checkbox-group原创 2022-05-05 16:50:49 · 5286 阅读 · 0 评论 -
vue之发送请求
目录vue之发送请求post请求方式post - formdata的提交 表单提交方式post - json格式vue之发送请求post请求方式post - formdata的提交 表单提交方式poat - formdata的提交let data = new FormData();data.append("sparePartCode", this.editForm.sparePartCode)data.append("safeQty", this.editForm.safeQty)this原创 2022-04-27 15:05:24 · 513 阅读 · 0 评论 -
vue之导出excel表格
目录vue之导出excel表格vue之导出excel表格 <el-button type="primary" @click="exportBtn">{{$t('导出')}}</el-button>import XLSX from 'xlsx' // 导出 exportBtn() { let url = service.API_EXPORT_DATA.format( this.keywordFormObjSuc.keyword原创 2022-04-27 13:37:35 · 619 阅读 · 0 评论 -
vue之使用 vue-pdf插件
目录vue之使用 vue-pdf插件使用vue之使用 vue-pdf插件下载:yarn add pdfjs-dist@2.5.207 -S 与 yarn add vue-pdf@4.2.0 -S注意点:下载最新版本 4.3.0时,使用会报错使用html currentPage- {{ currentPage}} <button @click="change1">上一页</button> <button @click="change2"&g原创 2022-04-19 15:38:48 · 1632 阅读 · 0 评论 -
vue之 el-form相关校验规则
目录vue之 el-form相关校验规则校验 年龄 必须必填、必须为数字类型、必须大于18岁校验用户名 必须为字母,下划线,数字校验用户名 用户名必填,必须为中文、字母、数字、下划线vue之 el-form相关校验规则校验 年龄 必须必填、必须为数字类型、必须大于18岁<!--描述: 作者:xzl 时间:03月30日190506--><template> <div class="Home"> Home formObj {{ formObj原创 2022-04-18 21:18:23 · 2464 阅读 · 0 评论 -
vue之删除table列表数据,自动跳转到上一页
目录vue之删除table列表数据,自动跳转到上一页index.vuevue之删除table列表数据,自动跳转到上一页index.vue pager: { page: 1, size: 10, total: 0 },// 删除后 处理分页问题 //(总数 - 删除的页数长度) / 总页数 得到当前页// ids为删除的数组 const totalPage = Math.ceil((this.pager.total - id原创 2022-04-16 11:30:55 · 815 阅读 · 0 评论 -
vue之排班日历的 实现
这里写自定义目录标题vue之排班日历的 实现index.vue排班日历组件 calendar.vuecalendar.jsvue之排班日历的 实现查询日期和数据,展示对于的排班日历,蓝色为高亮区,代表排班的日期index.vue<template> <div class="inspect_schedule_page repair_page spotCheck-page" v-cloak> <div class="content"> &l原创 2022-04-15 21:00:23 · 8570 阅读 · 5 评论 -
vue之ele左侧菜单(递归菜单)
目录vue之ele左侧菜单(递归菜单)Layout.vueSilder.vuechildMenu.vuevue之ele左侧菜单(递归菜单)Layout.vue<template> <el-container style="height: 100%; width: 100%"> <Silder /> <!-- <el-aside width="200px">Aside</el-aside> --> &原创 2022-01-11 21:42:05 · 888 阅读 · 0 评论 -
vue之实现 公共组件抽离到mixin用法
目录vue之实现 公共组件抽离到mixin用法mixins / commomCardMixins.jsCommomCard.vue使用组件TopView / index.vueTotalSales.vueTotalOrder.vueTodayUser.vueTotalUsers.vuevue之实现 公共组件抽离到mixin用法mixins / commomCardMixins.jsimport CommomCard from "../views/childCom/TopView/CommomCard原创 2021-11-07 09:39:48 · 522 阅读 · 0 评论 -
vue 之省级三级联动组件
目录vue 之省级三级联动组件vue 之省级三级联动组件+参考链接: link.安装:npm install element-china-area-data -S使用:<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"原创 2021-07-07 10:33:14 · 170 阅读 · 0 评论 -
vue-seamless-scroll无缝滚动的实现
目录vue-seamless-scroll无缝滚动的实现vue-seamless-scroll官网vue-seamless-scroll无缝滚动的实现需求:向上无缝滚动<!-- * @Author: Zhijie Luo * @LastEditors: Zhijie Luo * @Date: 2021-03-24 15:29:24 * @LastEditTime: 2021-04-23 15:54:30 * @Description:--><template>原创 2021-07-02 14:32:59 · 360 阅读 · 0 评论 -
vue添加动态粒子背景
vue添加动态粒子背景转载:链接: link.1安装:npm install vue-particles --save-dev2mian.js 引入import VueParticles from 'vue-particles'Vue.use(VueParticles)3使用<vue-particles color="#dedede" :particleOpacity="0.7" :particlesNumber原创 2021-07-02 11:34:17 · 324 阅读 · 0 评论 -
vue之ele中的时间组件,设置禁用的日期
vue之ele中的时间组件,设置禁用的日期只允许选择当月的最后一天和下月的第一天转载于:链接: link.<template> <div class="container"> <el-date-picker v-model="value" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-pick原创 2021-06-29 11:38:18 · 1020 阅读 · 0 评论 -
vue 之 ele动态删除dom节点
目录vue 之 ele动态删除dom节点完全删除子dom节点删除最后一个dom节点vue 之 ele动态删除dom节点比如上传失败的时候,由于ele之中的dom节点已经加载上去了。这时候需要获取到最后上传的dom节点去删除掉完全删除子dom节点 let dom = document.querySelector(".el-upload-list"); let donChildObj = dom.childNodes; for (var i = donChildObj.leng原创 2021-06-02 10:02:52 · 1942 阅读 · 0 评论 -
vue 之 ele上传文件 和 下载文件
目录vue 之 ele上传文件vue 之 ele上传文件一点击选取文件的时候,直接对接后端接口,上传文件,获取返回的数据对象可以删除已上传的文件,也需要对接后端接口进行删除<template> <div class="upload_file clear_fix"> <!-- <div>uploadAllFile -- {{ uploadAllFile }}</div> --> <div class="uplo原创 2021-05-22 11:22:11 · 974 阅读 · 0 评论 -
vue 之ele多级联组件的使用
目录vue 之ele多级联组件 添加额外的按钮HTMLjsCSSvue 之ele多级联组件 添加额外的按钮需求:第一层:集团; 第二层:板块; 第三层:产业在ele多级联组件之中,第一层的时候添加一个全部按钮,点击第一层的全部的时候,则直接查询所有集团的数据;在ele多级联组件之中,第二层的时候添加一个全部按钮,点击第二层的全部的时候,则直接查询所有板块的数据;点击级联的第三层的时候,才加载数据!HTMLgroupName :则是需要现实的 点击了第二层的全部的时候,才显示的!原创 2021-04-21 16:54:38 · 500 阅读 · 0 评论 -
vue 之后台 表单等父子表单的联动
vue 之后台 表单等父子表单的联动需求:就是针对业务品种勾选的时候,可以影响子业务品种,父业务品种有着8种,而着8种父业务下,对应的子业务有着10几种,那么只有勾选父业务的时候,才显示对应的子业务!需求2:就是父业务点击 X 的那个清除按钮的时候,需要清除掉自身的值,需要清除掉子业务选中的值需求3:点击子业务点击 X 的那个清除按钮的时候,需要清除掉自身的值需求4:父子业务改变的时候,下面还有数十种业务的改变,前提是需要先把选中的值清空针对业务品种 这个东西,封装为一个组件的时候,那么由于是原创 2021-03-12 16:19:39 · 1146 阅读 · 0 评论 -
vue后台之 简单的查询 + 分页
目录vue后台之 简单的查询 + 分页data数据的定义查询的设置 && 重置singleInit 请求vue后台之 简单的查询 + 分页思路:就是当上面的下拉菜单切换的时候,使用一个变量去接受这个当前切换的值,针对每一个下拉菜单的设置不同的变量,然后给查询的时候,设置一个对象,再点击查询的时候,把所有的变量,给当前对象的对象,一一赋值data数据的定义 lntype:"", // 品种 lnid:"", // 子品种 lnamtStart:"原创 2021-03-07 17:57:36 · 1739 阅读 · 0 评论 -
vue后台 之 zTree的使用
目录vue后台 之 zTree的使用菜单权限的实现res.data.dat 最初的数据格式vue后台 之 zTree的使用官网:链接: link.解析:链接: link.菜单权限的实现点击菜单权限的时候,弹出对话框拿到当前row的id发起请求html <el-table :header-cell-style="headClass" :data="tableData" class="menuTable"原创 2021-01-04 09:28:07 · 535 阅读 · 0 评论 -
vue 后台 之 rem适配
目录vue 后台 之 rem适配cssrem插件的安装rem.js使用的时候,直接就是 px自动转化为 rem了!vue 后台 之 rem适配cssrem插件的安装在vscode之中安装这个 cssrem插件配置好依赖项rem.js在public之中static之下,创建 rem.js文件然后在index.html之中 引入这个文件即可(function (doc, win) { var docEl = doc.documentElement, resizeEvt =原创 2020-12-12 11:06:57 · 923 阅读 · 0 评论 -
浅谈vue2.0+ ele 项目的构建
目录项目创建和配置配置启动 package.json配置文件配置 main.js文件中对ui框架的使用项目创建和配置vue create back_stage 创建项目配置启动 package.jsonnpm start 可以启动项目//第五行 "scripts": { "serve": "vue-cli-service serve", "start": "npm run serve", "build": "vue-cli-service build",原创 2020-10-04 09:05:14 · 317 阅读 · 0 评论 -
vue 后台之商品分类 (表榕树组件)
目录商品分类商品分类功能:使用表榕树组件官网: https://www.npmjs.com/package/vue-table-with-tree-grid下载 :npm i vue-table-with-tree-grid -Smain.js中引入:import TreeTable from 'vue-table-with-tree-grid'main.js中注册为全局组件 Vue.component('tree-table', TreeTable)tree-table 组件的使用原创 2020-10-22 12:27:47 · 780 阅读 · 0 评论 -
vue之权限列表的渲染
目录权限列表权限列表功能:先获取权限的数据,然后使用 table的形式渲染数据根据里面的等级的不同,渲染出不一样的等级列表<template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</原创 2020-10-20 21:35:52 · 439 阅读 · 0 评论 -
vue-cli 3x 配置 => 给路径起一个别名
目录vue-cli 3x 配置 => 给路径起一个别名上面给 src 和 src/components 等起了一个别名,那么在项目之中引用即可vue-cli 3x 配置 => 给路径起一个别名在根目录下创建vue.config.jsvar path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack: confi原创 2020-09-03 22:16:42 · 305 阅读 · 1 评论 -
浅谈axios的二次封装与拦截器
目录axios的二次封装与拦截器network/request.js 请求拦截等具体使用axios的二次封装与拦截器官网:https://www.npmjs.com/package/axios#interceptors就是在请求发出去之前的操作!比如:请求的时候需要携带token值,需要一个loading等效果!network/request.js 请求拦截等import axios from "axios";import store from "../store/index"im原创 2020-10-08 15:27:18 · 463 阅读 · 0 评论 -
浅谈商品分类参数
目录完整代码功能:使用级联选择器步骤官网:https://element.eleme.cn/#/zh-CN/component/cascader属性的介绍 <!-- 选择商品分类区域 --> <el-row class="cat_opt"> <el-col> <span>选择商品分类:</span> <!-- 商品分类的级联选择框原创 2020-10-04 15:50:47 · 554 阅读 · 0 评论 -
vue 之 角色列表
目录权限管理权限列表的渲染角色列表的渲染权限管理权限列表的渲染<template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-br原创 2020-10-03 08:10:22 · 522 阅读 · 0 评论 -
user用户列表
目录功能:搜索添加列表渲染编辑删除分配权限<template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-b原创 2020-10-04 11:04:24 · 3712 阅读 · 0 评论 -
vue项目之home页面的配置
目录功能:首先发起请求,获取到左侧菜单选项点击退出功能点击二级菜单的时候,保存活跃的path,为了刷新后可以显示之前点击的菜单列表!主体使用 <router-view></router-view> 来显示对应的path路径的组件<template> <el-container> <!-- 头部 --> <el-header> <div> <img原创 2020-10-04 10:09:30 · 2275 阅读 · 0 评论