韩城网站建设,wordpress 别名排序,微信视频号推广方法,wordpress 博客统计一、Vue点击跳转外部链接
点击重新打开一个页面窗口#xff0c;不覆盖当前的页面 window.open(https://www.baidu.com,_blank)_blank 新打开一个窗口_self 覆盖当前的窗口例如#xff1a;导入用户模板下载
templateDownload() {wi…一、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获取所对应的文字
templatediv classapp-containerel-cascader stylewidth: 280px; refcascader v-modelselect_address :propspropsplaceholder选择地区 :optionsaddress_optionschangeselect_addressFun clearable / /div
/templatescriptimport { 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 stylewidth: 280px; refcascader v-modelselect_address :propspropsplaceholder选择地区 :optionsaddress_optionschangeselect_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-modelmyDayNumoninputvaluevalue.replace(/^\.|[^\d.]/g,) //关键代码placeholder输入次数 /
七、vue实现导出excel 功能
通过vue实现导出有2种方式 1后端返回的是一个地址直接拼接打开下载即可。 2后端返回的是文件流的形式这个时候就需要在 请求头和返回值 这两处设置一下。
1.后端返回的是地址
// 页面代码
el-buttontypeprimarysizeminiclassfilter-itemiconel-icon-downloadclickexportFun导出/el-buttonexportFun() { //导出方法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-buttontypeprimarysizeminiclassfilter-itemiconel-icon-downloadclickexportFun导出/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-modelmyRadioel-radio :labeltrue是/el-radioel-radio :labelfalse否/el-radio
/el-radio-groupexport default {data() {return {myRadio: false, //布尔值};}
};2.数字类型在label前加上 [ : ]
el-radio-group v-modelmyRadioel-radio :label1是/el-radioel-radio :label2否/el-radioel-radio :label3不清楚/el-radio
/el-radio-groupexport default {data() {return {myRadio: 1, //这里改为数字};}
};3.字符串类型在label后加单引号(‘’)包起来
el-radio-group v-modelmyRadio change$forceUpdate() sizemediumel-radio :label是是/el-radioel-radio :label否否/el-radio/el-radio-groupscriptexport 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-cascaderrefcascaderv-modeloptionsValue:optionsoptions:propsOptionschangehandleChange 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 newArrthis.oldArr.map(item{return item.id;
})//第三种方法
let newArrthis.oldArr.map(item{return Object.assign({},{id:item.id})
})持续更新中……
