基于vue-admin-element开发后台管理系统【技术点整理】

一、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获取所对应的文字

<template>
	<div class="app-container">
		<el-cascader  style="width: 280px;" 
		ref="cascader" 
		v-model="select_address" 
		:props="props"
		placeholder="选择地区" 
		:options="address_options"
		@change="select_addressFun" 
		clearable />	
	</div>
</template>

<script>
	import { Address } from '@/api/user'   //封装的获取省市区的接口
	export default {
		data() {
			return {
				props: {
					value: "Code",
					label: "Name"
				},
				address_options: [],
				select_address: '',
			}
		},
		created() {
			this.getAddress()   //调用省市区接口
		},
		methods: {
			// 获取省市区
			getAddress() {
				Address().then(res => {
					console.log(res)
					this.address_options = this.getTrees(res.DataList, '');
					console.log('省市区', this.address_options)
				})
			},
			getTrees(ary, pid) {
				if (!pid) {
					// 如果没有父id（第一次递归的时候）将所有父级查询出来
					return ary.filter(item => item.Level == 1).map(item => {
						// 通过父节点ID查询所有子节点
						item.children = this.getTrees(ary, item.Code)
						return item
					})
				} else {
					return ary.filter(item => item.FatherCode === pid).map(item => {
						// 通过父节点ID查询所有子节点
						if (this.getTrees(ary, item.Code).length > 0) {
							item.children = this.getTrees(ary, item.Code)
						}
						return item
					})
				}
			},
			//筛选省市区-删除选中状态
			reset() {
				this.select_address = []; //v-model绑定值清空
				this.$nextTick(() => {
					// 清空级联选择器选中状态
					this.$refs.cascader.$refs.panel.clearCheckedNodes()
					// 清除⾼亮
					this.$refs.cascader.$refs.panel.activePath = []
				})
			},

			//筛选省市区
			select_addressFun(value) {
				console.log("筛选省市区", value)
				// this.listQuery.PCode = value[0]
				// this.listQuery.CityCode = value[1]
				this.listQuery.ParamCode = value[2] || '' //行政区划代码
				// 获取节点下的汉字 （主要代码）
				let data = this.$refs.cascader.getCheckedNodes()[0].pathLabels.toString()
				//用for循环遍历获取的数据,并把逗号裁掉
				for (let i = 0; i < data.length; i++) {
					if (data[i] === ',') {
						data = data.replace(data[i], '')
					}
				}
				console.log('获取节点下的汉字', data);
				// this.temp.ProvinceCode = value[0]
				// this.temp.CityCode = value[1]
				// this.temp.AreaCode = value[2]
				// this.temp.OrgAddress = data
			},

		}
	}
</script>

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

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

	<el-cascader  style="width: 280px;" 
		ref="cascader" 
		v-model="select_address" 
		:props="props"
		placeholder="选择地区" 
		:options="address_options"
		@change="select_addressFun" 
		clearable />

	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 限制只能输入数字


<el-input  
 v-model="myDayNum"
 oninput="value=value.replace(/^\.+|[^\d.]/g,'')"    //关键代码
 placeholder="输入次数" />

七、vue实现导出excel 功能

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

1.后端返回的是地址

// 页面代码
<el-button
    type="primary"
    size="mini"
    class="filter-item"
    icon="el-icon-download"
    @click="exportFun">
       导出
 </el-button>
 
 exportFun() { //导出方法
     ExpUserList(this.listQuery)  //导出接口
      .then(result => {
         const url = result.data
         window.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）设置返回结果，处理返回的文件流

// 页面代码
<el-button
    type="primary"
    size="mini"
    class="filter-item"
    icon="el-icon-download"
    @click="exportFun">
       导出
 </el-button>
 
//调用导出接口
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 res
        return res
    } else if (res.code !== 200 && res.code !== 201 && res.code !== 204) {
        return Promise.reject(new Error(res.message || '发生错误！'))
    } else {
        return res
    }
}