基于vue-admin-element开发后台管理系统【技术点整理】
创始人
2024-05-24 18:12:05
0

一、Vue点击跳转外部链接

点击重新打开一个页面窗口,不覆盖当前的页面

 window.open('https://www.baidu.com',"_blank")"_blank"  新打开一个窗口"_self"    覆盖当前的窗口

例如:导入用户模板下载

templateDownload() {window.open('https:网址', "_self")
},

二、js 循环修改数组属性key值

思路:建一个空数组,进行push

let arrayNew = [];
datas.map((item, index) => {arryNew.push(Object.assign({}, item, {name: item.myName,value:item}));return arrayNew;
});
this.List = arrayNew;

三、vue中el-cascader(级联选择器) 根据下拉数据的id获取所对应的文字


四、el-cascader (级联选择器 )可以单独选择任意一级选项

在第三个问题的代码上进行添加:

	data() {return {props: {value: "Code",label: "Name",checkStrictly:true   //关键代码:设置父子节点取消选中关联,可以选择任意一级选项},}}

在这里插入图片描述

五、vue 实现手机号中间四位隐藏,显示*号


const tel = '15611116666'        //获取到接口返回的手机号
this.userTel= tel.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');

六、el-input 限制只能输入数字


七、vue实现导出excel 功能

通过vue实现导出有2种方式:
(1)后端返回的是一个地址,直接拼接打开下载即可。
(2)后端返回的是文件流的形式,这个时候就需要在 请求头和返回值 这两处设置一下。

1.后端返回的是地址

// 页面代码
导出exportFun() { //导出方法ExpUserList(this.listQuery)  //导出接口.then(result => {const url = result.datawindow.open(url)    //通过这个打开网页就可下载导出}).catch(err => console.log(err))}

2.后端返回的是文件流

1)设置请求头

// 导出用户数据查询(封装的接口)
export function ExpUserList(StartDate, EndDate, DistrictCode, IsNormal, Age) {return request({url: 'admin/Export/ExpUserList.ashx' + '?token=' + getToken() + '&StartDate=' + StartDate +'&EndDate=' + EndDate + '&DistrictCode=' + DistrictCode + '&IsNormal=' + IsNormal + '&Age=' + Age,method: 'Get',responseType: 'blob' //指明返回格式( 需要在此处设置请求头,设置请求的类型为blob文件流的形式)})
}

2)设置返回结果,处理返回的文件流

// 页面代码
导出//调用导出接口
exportFun() {ExpUserList(this.listQuery.StartDate, this.listQuery.EndDate, this.listQuery.DistrictCode, this.listQuery.IsNormal, this.listQuery.Age).then(res => {console.log(res)this.exportName = `用户数据`   //导出的文件名称let href = window.URL.createObjectURL(new Blob([res])); //将文件流转化为blob地址let link = document.createElement('a'); //创建a标签link.style.display = 'none';// 设置连接link.href = href;link.setAttribute('download', this.exportName + '.xlsx');document.body.appendChild(link);//设置点击事件link.click();document.body.removeChild(link); // 下载完成移除元素window.URL.revokeObjectURL(href); // 释放掉blob对象}).catch(err => {console.log(err)})
},

3)小提示:
有的时候做到上述几步还是不能导出,debugger 之后,发现接口调用的时候直接走的.catch,没走.then,
所以需要我们在全局响应拦截做一些判断。


//一般在utils下面的requext.js文件里面
export function validResponse(res, errorMessage) {if (res instanceof Blob) {  //如果返回的是文件流的形式,直接return resreturn res} else if (res.code !== 200 && res.code !== 201 && res.code !== 204) {return Promise.reject(new Error(res.message || '发生错误!'))} else {return res}
}

八、el-radio (单选框) 绑定 —1布尔类型/ 2数字/ 3类型字符串

1.布尔类型(在label前加上 [ : ] )


export default {data() {return {myRadio: false, //布尔值};}
};

2.数字类型(在label前加上 [ : ] )

不清楚
export default {data() {return {myRadio: 1, //这里改为数字};}
};

3.字符串类型(在label后加单引号(‘’)包起来)


未完待续……

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
修复 爱普生 EPSON L4... L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...