vue
Yilia-Feng
我有一只大金毛
展开
-
el-element-admin实现双路由菜单
4、localStorage中存储了enterpriseProjectFlag属性 该属性为1时代表企业级菜单,反之为0则代表项目级菜单。:当企业级的时候在router.js loadMenus方法里加载企业级菜单 相反则加载项目级菜单。2、点击企业级菜单中的首页,右边显示项目列表,点击某一行跳转到项目级菜单。6、点击企业级首页右边显示的项目列表的某一行 跳转到项目级逻辑。1、用户名登录的时候有当前登录角色,登录进去后显示企业级菜单。企业级菜单和项目级菜单,后端分别给接口。引用企业级、菜单级接口。原创 2023-06-14 17:14:13 · 1269 阅读 · 0 评论 -
vue中给v-for循环里的指定内容加样式、以及给点击的a标签加高亮
vue原创 2022-07-27 15:42:49 · 1366 阅读 · 0 评论 -
mock数据升序、降序随机生成数据
mock原创 2022-07-27 11:08:43 · 522 阅读 · 0 评论 -
vue中使用mock模拟后端数据
mock原创 2022-07-21 18:39:37 · 1098 阅读 · 0 评论 -
vue 3秒自动请求接口 刷新页面
vue原创 2022-07-20 15:04:41 · 1630 阅读 · 0 评论 -
vue2和vue3总结(精简版)
阅读此帖时建议先阅读 带你体验Vue2和Vue3开发组件有什么区别 此文章一、建立datavue2v-model = "name"v-model = "age"data() { return{ name:'', age:'' }}vue3v-model = "state.name"v-model = "state.age"import {reactive} from 'vue'setup(){ const state = reactive({ name:'',原创 2021-11-25 10:24:19 · 875 阅读 · 1 评论 -
iview table tree可编辑指定列
先上效果图:需求:1、表格里放tree2、Formula列 可编辑下拉框3、Min、Max 可编辑数字输入框4、有且仅有一个编辑框显示在界面上实现:1、表格<Table row-key="id" :colunms="colunms" :data="tableData" border @on-expand-tree="onexpandtree"></Table>2、初始化参数data(){ return{ formulaList:[{ id:0,原创 2021-11-11 17:33:09 · 1240 阅读 · 0 评论 -
vue-cli Failed to download repo vuejs-templates/webpack报错
报错原因:如题所示,通过vue-cli工具命令 vue init webpack vue_portal 创建vue项目的时候报错,提示连接超时,因为内网无法下载,超时错误截图如下:解决方案:改为离线创建,我们需要下载github仓库中的vue-templates/webpack,然后解压到本地。1、先在各自用户根目录下新建 .vue-templates 目录,注意文件夹名称前面的点(.)2、去外网下载webpack下载地址为:https://github.com/vuejs-template原创 2021-11-05 17:06:42 · 611 阅读 · 0 评论 -
npm镜像源如何设置
1、没有安装npm,先到node官网下载安装node.js(自带npm)。2、按win+r,输入cmd,打开dos命令。3、输入npm get registry:查看当前镜像源为 http://registry.npm taobao.org/4、输入npm config set registry xxx(镜像源地址)。内网镜像为例: npm config set registry http://xx.xx.xx.xx:8081/repository/npm-group/C:\workcode\vu原创 2021-11-05 15:53:59 · 19903 阅读 · 1 评论 -
iview table 自定义单元格背景色
效果图首先iview 官网有对单元格样式做过讲解单元格:通过给数据 data 设置字段 cellClassName 可以给任意一个单元格指定样式。1.初始化tableColumns: [{ title: "客户", key: 'companyName' }, { title: "区域", key: 'region' }, { title: "操作系统", key: 'os' }, { ti原创 2021-08-31 16:37:55 · 1640 阅读 · 0 评论 -
iview table 合并前三列
先上效果图需求:合并客户、区域、操作系统三列 (要点前后端需统一好返参顺序 合并内容需相邻 否则无法做循环判断)实现1.目前iview 官网上有合并列的例子 大家可以先去自行研究 这里就不再做过多的讲解 以效果图为例客户列:return [10,1] (10行1列) 其余 return [0,0] (表示合并0行0列,即这是被合并的单元格)区域列:return [8,1] 、return [2,1] 其余return [0,0]操作系统:return [2,1] 、return [1,1]、原创 2021-08-18 13:03:51 · 666 阅读 · 0 评论 -
vue iview动态循环的表单里的select下拉框的值不能重复选择
先上效果图:实现1.循环显示名称下拉框<!-- 成本中心 --><div v-for="(item,index) in costAllocationForm.apportionCostCenterRelationshipDTOList" :key="index"> <Row :gutter="4" style="margin-bottom:20px;"> <Col span="10"> <!--原创 2021-07-20 15:02:33 · 1039 阅读 · 0 评论 -
vue+iview 动态循环表头+编辑单元格
先上效果图:需求:1.动态循环后端返回的表头 以及 表格数据2.鼠标悬浮动态列 显示key:value3.编辑table里的 单元格动态循环表头因为是后端返回表头数组 固用不了render 只能换种方式用slot动态循环显示表头 具体如下<Table :no-data-text="$t('common.noData')" :columns="tableColumns" :data="tableData" border> <!-- 资源ID --> &l原创 2021-07-02 14:38:03 · 1294 阅读 · 1 评论 -
iview Row/Col栅格布局 Col空导致样式错乱
问题:“描述” 字段 后端返参为空 Col会往前移动一格解决: style=“min-height:1px;” <Col span="3" style="min-height: 1px;">{{tag.describe}}</Col>原创 2021-06-25 15:11:40 · 1165 阅读 · 0 评论 -
vue+iview 动态表头全选功能
需求:动态表头分个人信息、工作信息、教育信息三个模块 每个小模块都有全选按钮 点击每个模块下的子checkbox 表格里的列根据表头顺序插入效果图:实现:1.动态表头<!-- 动态表头 --><Collapse> <Panel name="1"> <span style="font-size:13px;font-weight:600;">动态表头</span> <template sl原创 2021-06-09 18:00:54 · 2674 阅读 · 2 评论 -
vue+iview 内网预览(本文重点)+外网预览word、excel、pdf、ppt
访问内网文件思路如下:1.后端将文件转为二进制文件流 word+excel将其转为html 从而实现文件预览2.pdf没这么复杂具体可看下文3.ppt的实现方式是后端将ppt转为pdf 然后调用pdf接口上众所期待的效果图:wordexcelpdf一、预览公网上的文件(较为简单 所以放第一)1.预览公网能访问的文件 使用XDOC就能实现//file_url是你的文件地址<a href="http://www.xdocin.com/xdoc?_func=to&_for原创 2021-05-28 21:14:17 · 7626 阅读 · 13 评论 -
iview 多级循环表单验证
先上效果图需求:需要有多个明细 每个明细下的账号能多行添加(以及给Input Select加表单验证)<!-- 明细 --><div v-for="(item,index) in bankInformationForm.details" :key="index"> <Row :gutter="10" style="margin-bottom: 10px;"> <Col span="24"> <Car原创 2021-05-20 12:07:12 · 811 阅读 · 0 评论 -
SSI命令不起效
错误代码:<!-- #include file="bottom.html"--> 导致显示不出原因:<!--与#号间不能有空格,只有SSI指令与参数间存在空格正确写法:<!--#include file="bottom.html"-->原创 2021-05-18 19:18:24 · 236 阅读 · 0 评论 -
vue v-if判断数组中是否存在某个值 做显示隐藏(iview
多选下拉框elasticComputeCloudWarningForm.noticeType=[0,1,2,3]<FormItem :label="$t('alarms.common.noticeType')" prop="noticeType"> <Select v-model="elasticComputeCloudWarningForm.noticeType" multiple style="width:300px;" :placeholder="$t('alarms.comm原创 2021-04-29 10:43:55 · 5297 阅读 · 0 评论 -
vue中 快速输入时 获取最后一次接口返回值
分页查询时 有多个Input搜索框 为了用户体验 分页查询时用了@on-change事件 也就是说 每做一次操作 就会调用后端分页查询接口 此时出现一个问题 在快速输入的时候 最后一次返回的值被前面的请求结果给覆盖了由于@on-change事件缘故 第一次传参是1(图一最后一次是12 (图二此时很明显看到 后端没有任何问题 但前端显示的效果是图二的返参数解决方案给分页接口加延时setTimeout(() => {}, 1000);// 分页显示数据/****************原创 2021-04-22 16:41:05 · 996 阅读 · 1 评论 -
vue+iview+echarts 循环显示echarts折线图且放大该图表
需求:一共有四种云平台类型分别为:Aws、阿里云、Azure、Vmware,针对这四种类型 循环显示各类型的直线图循环不同种类折线图<Row :gutter="16"> <Col span="6" v-for="(item,index) in (this.$route.query.accountTypeName=='AWS'? awsList:this.$route.query.accountTypeName=='Aliyun'? alyList:this.$route.que原创 2021-04-21 14:27:00 · 1261 阅读 · 0 评论 -
vue中 v-for里加三元表达式 多个判断
<!-- 折线图 --><Row :gutter="16"> <Col span="6" v-for="(item,index) in (this.$route.query.accountTypeName=='AWS'? awsList:this.$route.query.accountTypeName=='Aliyun'? alyList:this.$route.query.accountTypeName=='Azure'? azureList:vmwareLis原创 2021-04-19 16:22:04 · 4319 阅读 · 2 评论 -
vue+iview 表单验证不成功会关闭弹窗 解决方案
问题来源一个项目里必然会有表单提交需求 表单里必定会有必填字段 那么点击"提交"按钮时 如果必填项未填 Modal弹出框是不能关闭的 但现在相反 弹窗关闭了 解决方案如下表单<Modal v-model="employeeEntryInformationModel" title="添加入职信息'" @on-cancel="cancel('employeeEntryInformationForm')" @on-ok="submit('employeeEntryInformationForm')"原创 2021-01-26 17:53:07 · 1420 阅读 · 1 评论 -
vue 取两位小数且打千分号、vue 仅打千分号
在做账单需求时常会出现以下两种情况一、取两位小数且打千分号<h4>{{item.currencyDesc}} {{item.cost.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}}</h4>二、仅打千分号<h4>{{item.usageQuantity.toLocaleString()}}</h4>...原创 2020-12-15 17:59:32 · 579 阅读 · 0 评论 -
Vue 项目启动抛出 Syntax Error/ Unexpected token
报错内容错误原因1.ES6 新增了不少标识符,但浏览器大多无法直接识别,需要借助 babel 对 ES6 代码进行转义2.项目启动时抛出如下错误,表示 … 运算符没能被识别,该运算符属于 ES6 的解构运算符3.出现该问题的原因基本上可以定位是项目没有配置 babel 即使package.json 文件中已经引入 babel ,但仍然需要在项目根目录创建一个 .balbelrc 文件进行配置解决方式在项目根目录创建 .babelrc 文件即可实现对 babel 的基本配置{ "preset原创 2020-12-03 15:54:11 · 2623 阅读 · 0 评论 -
npm报错./node_modules/view-design/dist/styles/iview.css 解决方案
在根文件里面新建一个文件postcss.config.js ,在里面添加以下代码:module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } }添加完上述代码:npm run dev 就能正常运行原创 2020-11-13 11:24:28 · 2005 阅读 · 0 评论 -
vue 按钮级权限控制
1.在登录时 调用存放按钮权限数组 后端反参格式如下 // 查询当前用户的权限集合 /****************************************************/ this.$api.menu.jurisdictionList({}) .then(res=>{ this.menuList = res.data; })然后保存到localStorage里//localStorage 存储数组对象的方法saveObjArr:functio原创 2020-07-13 16:23:20 · 2698 阅读 · 0 评论 -
vue 中使用print.js导出pdf
1.print.js// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string"原创 2020-07-13 15:17:06 · 2235 阅读 · 1 评论 -
vue中嵌入外部网站
利用iframetop:导航栏的heightleft:左侧菜单栏的widthsrc:右侧页面要嵌入的外部网站<template> <div> <iframe src="https://www.iconfont.cn/" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:64px;left: 240px;right:0px;bottom:100px;">原创 2020-07-10 10:59:00 · 18968 阅读 · 16 评论 -
vue iview 隐藏Table组件里的某一列
假设我要隐藏columns里的 “账户组名称” columns: [{ type: 'selection', width: 60, align: 'center'},{ title: '账号ID', key: 'accountIdString'},{ title: '账号名称', key: 'accountName'},{ title: '账户组名称', key: 'accountGroupName'}】2.根.原创 2020-05-28 14:09:16 · 7193 阅读 · 0 评论 -
vue地址栏路由传参 参数为数组时刷新页面变为字符串 处理方案
1.路由跳转传参 重点 accountIdList:JSON.stringify(row.accountIdList)reportConfigurationDetail: function(row){ this.$router.push({path:'/operationKpiConfigurationManagement/reportConfiguration/',query: {reportId: row.id,companyId:row.companyId,reportDate:row.repo原创 2020-05-28 11:50:26 · 4828 阅读 · 1 评论 -
iview Upload组件 表单附件验证规则写法
1.附件内容<!-- 附件 --><FormItem label="附件" prop="enclosure"> <Upload ref="upload" v-model="attachmentListForm.enclosure" :on-success="uploadSuccess" :on-error="uploadError" multiple :headers='{"userName": userName}' type="drag" :action="ac原创 2020-05-25 13:50:57 · 1464 阅读 · 0 评论 -
iview DatePicker日期组件传给后端2020-05格式 而不是UTC时间(保证传参与页面选项一致)
1.表单内容 重点 @on-change=“overtimeStatisticsEditForm.overtimeYearMonth=$event” 和 :value="overtimeStatisticsEditForm.overtimeYearMonth"<!-- 额外贡献年月 --><FormItem label="额外贡献年月" prop="overtimeYearMonth"> <DatePicker type="month" placeholder="请选原创 2020-05-25 11:57:08 · 1346 阅读 · 1 评论 -
iview select获取该下拉框里的其余属性
1.如账户下拉框显示的是账户名<!-- 账户 --><FormItem label="账户" prop="accountId"> <Select v-model="vaultForm.accountId" style="width:300px;" @on-change="changeAccount"> <Option :value="item.id" v-for="(item,index) in accountList" v-bind:原创 2020-05-12 11:29:16 · 1406 阅读 · 0 评论 -
iview 表单验证多选日期
1.假设我现在要对值班时间下拉框进行日期多选<!-- 值班时间 --><FormItem label="值班时间" prop="ondutyTime"> <DatePicker type="date" multiple placeholder="请选择值班时间" v-model="operationDutyManagementForm.ondutyTime" style="width:300px;"></DatePicker></FormItem原创 2020-05-12 11:15:40 · 766 阅读 · 0 评论 -
vue打包 npm run build-test突然不动了
今天遇到一件很奇葩的事情输入npm run build-test 突然停在这不动了 what? 不动了?!后来google了一下 大家都是人才运行一下这句话 就动了!!npm config set registry http://registry.cnpmjs.org原创 2020-05-12 10:43:34 · 653 阅读 · 0 评论 -
vue切换菜单取消未完成接口请求
在做别的功能时 console里面总会报别的菜单接口里的错 看的很心烦 于是想优化一下 就有了这篇文章 在切换菜单的时候取消所有未完成接口的请求1.找到自己的请求拦截器 重点是 config.cancelToken = store.source.tokenhttp.interceptors.request.use(config => { config.cancelToken = ...原创 2020-03-20 10:41:01 · 284 阅读 · 0 评论 -
iview DatePicker日期组件禁止选择今天之后的日期 不包括今天
1.日期组件<DatePicker type="date" :options="options" placeholder="请选择日期" v-model="timeType" @on-change="changeTimeType(timeType)"></DatePicker>2.禁止选择 optionsdata() { return { optio...原创 2020-03-19 00:37:12 · 3866 阅读 · 0 评论 -
iview render i-switch值为true false时
1.table里的render{ title: '是否忽略', key: 'isIgnore', render: (h, params) => { return h('div', [ h('i-switch', { // 数据库0 enabled,1 disabled props: {...原创 2020-03-16 10:56:37 · 673 阅读 · 0 评论 -
vue打包后解决浏览器缓存问题
因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。解决方法:找到webpack .prod.conf.js1.定义版本变量: const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ,也可以自己定义成别的如:1.12.修改要生成的js和css文件的配置项,把刚...转载 2020-03-12 14:15:29 · 2338 阅读 · 0 评论