vue前端几个常用的方法

张亮java / 2023-08-28 / 原文

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()
        }
      },