vue常用代码块集锦(持续更新...)

1.对象数组去重公共方法

// arr: 数据原数组  label: 去重标志
uniqueFunc(arr, label) {
      const res = new Map()
      return arr.filter((item) => !res.has(item[label]) && res.set(item[label], 1))
},
 

2.递归获取树形结构数据中的某个属性值,并返回一个数组

 // 此方法是返回树形结构数组中的所有id
   getAllbhids(tree) {
      return tree.flatMap((node) => [node?.id, ...(node.children ? this.getAllbhids(node.children) : [])])
    },
 

3.vue下载文件时,自定义文件名

  downloadFile(filePath, name) {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = filePath
      link.setAttribute('download', name)
      document.body.appendChild(link)
      link.click()
    },
    handleDownload(row) {
      const url = `/api/yh/maintain/file${row.attachPath}?token=${util.cookies.get('token')}`
      this.downloadFile(url, row.attachOriginName)
    },

4.动态合并el-table行(指定某些行合并或者不合并)

// 只合并前面20列和第26列     
arraySpanMethod({ rowIndex, columnIndex }) {
            if (columnIndex < 21 || columnIndex == 26) {
                const _row = this.mergeColumn(this.tableData).one[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col,
                }
            }
        },
// 合并id为一样的数据
        mergeColumn(data) {
            const spanOneArr = []
            let concatOne = 0
            data.forEach((item, index) => {
                if (index === 0) {
                    spanOneArr.push(1)
                } else {
                    if (item.id === data[index - 1].id) {
                        spanOneArr[concatOne] += 1
                        spanOneArr.push(0)
                    } else {
                        spanOneArr.push(1)
                        concatOne = index
                    }
                }
            })
            let count = 0
            for (let n in spanOneArr) {
                if (spanOneArr[n] > 0) {
                    count += 1
                    this.$set(data[n], 'Number', count)
                }
            }
            return {
                one: spanOneArr,
            }
        },

自定义序号(分页序号递增):

    indexAdd(index) {
            const page = this.pageInfo.page
            const pagesize = this.pageInfo.limit
            return this.tableData[index].Number ? this.tableData[index].Number + (page - 1) * pagesize : ''
        },

效果图:

5.重置表单各项:

  for (const key in this.formLabelAlign) {
                if (Array.isArray(this.formLabelAlign[key])) {
                    this.formLabelAlign[key] = []
                } else {
                    this.formLabelAlign[key] = ''
                }
            }