一、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
}
}
八、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-cascader
ref="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})
})
十三、vue-admin-element使用echart折线图
1.安装echart插件
npm install echarts --save
2.引入echart
import * as echarts from 'echarts'
引入echart有全部引入和按需引入，这里我使用的是全部引入，且在自己需要的页面下，而不是main.js
按需引入：https://echarts.apache.org/handbook/zh/basics/import
3.页面上定义一个有宽高容器（如果没有宽高，图表不会显示）
<div id="map" style="width: 100%;height:400px;"></div>
4.在js里初始化（一定要先获取后台数据，再渲染echarts图表）
methods: {
//1获取数据列表
getList() {
userBPRecordList(this.listQuery, this.pageIndex, this.pageSize).then(res => {
this.total = res.TotalCount
this.list = res.DataList
console.log('打印列表', res)
if (res.TotalCount == 0) {
//没有数据时
//在data里定义好的空数组
this.xdata = []
this.y1data = []
this.y2data = []
this.getMap() //渲染图表
} else {
res.DataList.forEach(element => {
this.xdata.push(element.Date + ' ' + element.Time) //x轴时间
this.y1data.push(element.SBP) //SBP收缩压
this.y2data.push(element.DBP) //DBP舒张压
});
// console.log('打印x轴时间', this.xdata)
// console.log('打印收缩压', this.y1data)
// console.log('打印舒张压', this.y2data)
this.getMap() //渲染图表
}
})
},
//2初始化echarts
getMap() {
var myChart = echarts.init(document.getElementById('map'))
let option = {
title: {
text: '血压趋势图',
x: 'center',
y: 'top',
textAlign: 'left'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['收缩压', '舒张压'],
bottom: 0,
padding: [30, 30, 0, 0],
},
grid: {
top: '15%',
left: '6%',
right: '6%',
bottom: '10%',
// containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.xdata
},
yAxis: {
// min: 0, //取0为最小刻度
// max: 200, //取100为最大刻度
},
series: [{
name: '收缩压',
type: 'line',
data: this.y1data
},
{
name: '舒张压',
type: 'line',
data: this.y2data
}]
}
myChart.setOption(option);
},
}
5.展示效果：
————————————————————————分割线———————————————————————————
十四、echart折线图的 y轴数据和后端接口返回的数据对应不上。
1.问题展示：
2.解决方法：
stack属性的原因，stack属性会把同一个维度上的数据进行加和的处理，所以体现在y的数据就会基数变大。进而每一个小的节点也会变大。
所以只需要修改stack属性，把他删除或者修改属性值即可。如下图所示：
3.处理好后的展示效果：
