vue前端几个常用的方法
1,字符串数组去重的方法
一、使用set结构去重
set是ES6中的一种数据结构,可以去除重复元素,其特征为无序且不重复,经常用于数组去重的场景。
let arr = [1, 2, 2, 3, 3, 4, 5]; let set = new Set(arr); arr = Array.from(set);
二、使用indexOf方法去重
indexOf方法可以在数组中找到一个给定元素的第一个索引,如果没有找到就返回 -1,所以我们可以利用这个特性来进行数组去重。
let arr = [1, 2, 2, 3, 3, 4, 5]; let newArr = []; for (let i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]); } } arr = newArr;
三、使用includes方法去重
includes方法是ES7的一个新方法,判断一个数组中是否包含一个指定的值,返回 true 或 false。我们可以根据这个特性来进行去重操作。
let arr = [1, 2, 2, 3, 3, 4, 5]; let newArr = []; for (let i = 0; i < arr.length; i++) { if (!newArr.includes(arr[i])) { newArr.push(arr[i]); } } arr = newArr;
2,有时候某个方法修改了vue form表单里的某个字段的内容,但是数据没用更改过来,这是因为没用渲染
重新渲染的方法: this.$forceUpdate()
3,需要在某个table表字段上面增加备注说明的代码
{ title:this.$t('WeeklyMessageModal.securityExams'), key: "safetyExam", filterDropdown: (<div></div>), filterIcon: <a-tooltip title="工人,司机等无办公电脑人员,不纳入考试系统范围;考试结果是上周的考试情况,周报作为归档数据不会变化,如需查看最新的考试情况请进入考试管理模块查询" placement="topRight" > <a-icon type='question-circle-o' style="color:red" /> </a-tooltip>, align:"center", dataIndex: 'safetyExam_dictText', scopedSlots: { customRender: 'safetyExamSlot' } },
对某个字段内容重新赋值
{
title:this.$t('weekly.numberOfEmailReminders'),
filterDropdown: (<div></div>),
filterIcon: <a-tooltip title="说明该周报未处理,系统自动发邮件提醒处理的次数" placement="topRight" >
<a-icon type='question-circle-o' style="color:red" />
</a-tooltip>,
align:"center",
dataIndex: 'remindNum',
customRender:function (text) {
return (text?'第 '+text+' 次':'')
}
}
4,过滤重复字典数据
/** 加载数据字典并合并到 options */ _loadDictConcatToOptions(column) { initDictOptions(column.dictCode).then((res) => { if (res.success) { let newOptions = (column.options || [])// .concat(res.result) res.result.forEach(item => { // 过滤重复数据 for (let option of newOptions) if (option.value === item.value) return newOptions.push(item) }) this.$set(column, 'options', newOptions) } else { console.group(`JEditableTable 查询字典(${column.dictCode})发生异常`) console.log(res.message) console.groupEnd() } }) },
gotoLogPage(){ //console.log("this.searchMenuOptions==",this.searchMenuOptions) if(this.logTableName){ let url = '/monitor/feishuDecrypt' if(url){ let route = this.searchMenuOptions.filter(item => item.path === url)[0] if(route){ this.$router.push({ path: url }); }else{ this.$message.warn("抱歉,您没有权限查看!"); } } } }, getSafetyPointByTimeAndBu(){ // 只有选中了BU的时候才去查数据 if(this.queryParam.buCode){ this.buName = this.buOptions.filter(item=>{ return item.businessUnitCode==this.queryParam.buCode })[0].businessUnitName; this.getSafetyPointReportByBuCode() }else{ // 重新渲染一下 this.$forceUpdate() } },
每天学习一点点,你就进步一点点。