基于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-buttontype="primary"size="mini"class="filter-item"icon="el-icon-download"@click="exportFun">导出</el-button>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）设置返回结果，处理返回的文件流

// 页面代码
<el-buttontype="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 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前加上 [ : ] ）

<el-radio-group v-model="myRadio"><el-radio :label="true">是</el-radio><el-radio :label="false">否</el-radio>
</el-radio-group>export default {data() {return {myRadio: false, //布尔值};}
};

2.数字类型（在label前加上 [ : ] ）

<el-radio-group v-model="myRadio"><el-radio :label="1">是</el-radio><el-radio :label="2">否</el-radio><el-radio :label="3">不清楚</el-radio>
</el-radio-group>export default {data() {return {myRadio: 1, //这里改为数字};}
};

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

<el-radio-group v-model="myRadio" @change="$forceUpdate()" size="medium"><el-radio :label="'是'">是</el-radio><el-radio :label="'否'">否</el-radio></el-radio-group><script>export default {data () {return {myRadio: "是"};}}
</script>

九、JS使用split()类 通过逗号将字符串拆分为数组

var intArray = "1,3,5,6";
var newArray = new Array();
newArray = intArray.split(",");console.log(typeof(newArray));   //"object"
console.log(newArray);           //["1", "3", "5", "6"]for (var element in newArray) {newArray[element] = parseInt(newArray[element], 10);
}console.log(typeof(newArray));     //"object"
console.log(newArray);             //[1, 3, 5, 6]

十、关于 vue-element-admin 退出登录后，切换账号时的路由缓存问题。

原因：keep-alive缓存标签没有清空。

解决：在layout/components/Navbar.vue中将里面的logout()方法改一下，把跳转路由的参数删除，这样退出登录就没有上次登录保留的页面了。

async logout() {await this.$store.dispatch('user/logout')// this.$router.push(`/login?redirect=${this.$route.fullPath}`)  //去掉页面上原有的这行//新增这一行关于 vue-element-admin 退出登录后keep-alive缓存标签没有清空this.$router.push("/login")  
}

十一、elementui el-cascader（日期控件） 清除级联选择框选中状态

<el-cascaderref="cascader"v-model="optionsValue":options="options":props="Options"@change="handleChange" clearable>
</el-cascader>放在methods中：
reset () {this.optionsValue=[];   //v-model绑定值清空this.$nextTick(() => {// 清空级联选择器选中状态this.$refs.cascader.$refs.panel.clearCheckedNodes()// 清除高亮this.$refs.cascader.$refs.panel.activePath = []})}

十二、js提取数组中的某个属性 组成一个新数组

原数组

this.oldArr = [{name:'aa',id:1,age:'12'},{name:'bb',id:2,age:'18'},{name:'cc',id:3,age:'22'},{name:'dd',ide:4,age:'30'}
];想要的结果是：newArr = [1,2,3,4];

//第一种方法：
let newArr=[]
//通过map方法将原始数组中的每一项循环
this.oldArr.map(item=>{this.newArr.push(item.id);
})//第二种方法：
let newArr=this.oldArr.map(item=>{return item.id;
})//第三种方法：
let newArr=this.oldArr.map(item=>{return Object.assign({},{'id':item.id})
})

持续更新中……