标签: 工具

前言

使用el-table做跨行跨列表格渲染，接口数据格式为对象数组，即需从对象中提取columns，且需要设置对应的跨行跨列关系。为此要实现一种更优雅的构造方法，即配置化跨行跨列动态渲染。
基于element-ui v2.4.11版本，实现对于该版本表格组件，跨行跨列的构造方法可以通过arraySpanMethod构造，由于笔者使用的是vue2写法，vue3雷同使用。

传送门：https://element.eleme.cn/2.4/#/zh-CN/component/table

methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
            if (columnIndex === 0) {

                return [1, 2];
            } else if (columnIndex === 1) {
                return [0, 0];
            }
        }
    }
}

Mr.ws2024/12/11大约 4 分钟

git合集

常用的工作流操作

git cherry-pick --no-edit [commitId1] [commitId2]  // 建议使用edit
git rebase -i [commitId]
:wq

`fatal: refusing to merge unrelated histories` 错误通常发生在尝试合并两个没有共同历史的 Git 仓库时。这个错误在子模块操作中也可能出现，特别是在你尝试更新或合并子模块时。
git pull origin main --allow-unrelated-histories

// 变基推送 
git push --force-with-lease origin master

Mr.ws2024/12/2小于 1 分钟

分片上传

文件上传是一个常见的需求，尤其是大文件的上传。为了提高上传效率和用户体验，我们可以采用并发切片上传和秒传技术。本文将介绍如何使用这些技术，并提供一个完整的实现示例。

1. 实现思路

文件切片：将大文件分成多个小切片，每个切片大小为1MB。
并发上传：使用并发池控制同时上传的切片数量，避免过多并发请求导致服务器压力过大。
秒传：在上传前通过文件的哈希值验证文件是否已经存在，如果存在则直接返回上传成功。
进度条：实时显示上传进度，提升用户体验。

Mr.ws2024/10/19大约 3 分钟

工具

HTML元素自动滚动

export class ScrollWrapper {
    constructor(vm, { scrollDirection = 1, speed = 0.3, bodyWrapper } = {}) {
        this.vm = vm;
        this.scrollDirection = scrollDirection;
        this.speed = speed;
        this.bodyWrapper = bodyWrapper;
        this.startScroll();
    }

    clearScroll() {
        cancelAnimationFrame(this.animationId);
    }

    startScroll() {
        this.vm.$nextTick(() => {
            if (!this.bodyWrapper) return;
            if (this.bodyWrapper.clientHeight >= this.bodyWrapper.scrollHeight) return;
            this.bodyWrapper.addEventListener('scroll', () => this.scroll());
            this.bodyWrapper.addEventListener('mouseenter', () => this.pauseScroll());
            this.bodyWrapper.addEventListener('mouseleave', () => this.resumeScroll());
            this.bodyWrapper.scrollTop = 0;
            this.scrollDirection = 1;
            this.pos = 0;
            this.clearScroll();
            this.startScrollFn();
        });
    }

    startScrollFn() {
        const step = () => {
            if (this.bodyWrapper && !this.isPaused) {
                this.pos += this.speed * this.scrollDirection;
                this.bodyWrapper.scrollTop = this.pos;
                if (this.bodyWrapper.scrollTop + this.bodyWrapper.clientHeight >= this.bodyWrapper.scrollHeight - 1) {
                    this.scrollDirection = -1;
                }
                if (this.bodyWrapper.scrollTop <= 0) {
                    this.scrollDirection = 1;
                }
            }
            this.animationId = requestAnimationFrame(step);
        };
        this.animationId = requestAnimationFrame(step);
    }

    pauseScroll() {
        this.isPaused = true;
    }

    resumeScroll() {
        this.isPaused = false;
    }

    scroll() {
        if (this.isPaused) {
            this.pos = this.bodyWrapper.scrollTop;
        }
    }
}

this.bodyWrapper.scrollTop = this.pos;

此处由于HTMLElement取值scrollTop会取整，为了保证浮点数滚动，所以声明pos过渡

全排列算法

const func = (arr) => {
  let len = arr.length,
    res = [];
  /**
   * 【全排列算法】
   * 说明：arrange用来对arr中的元素进行排列组合，将排列好的各个结果存在新数组中
   * @param tempArr：排列好的元素
   * @param leftArr：待排列元素
   */
  let arrange = (tempArr, leftArr) => {
    if (tempArr.length === len) {
      // 这里就是递归结束的地方
      // res.push(tempArr) // 得到全排列的每个元素都是数组
      res.push(tempArr.join("")); // 得到全排列的每个元素都是字符串
    } else {
      leftArr.forEach((item, index) => {
        let temp = [].concat(leftArr);
        temp.splice(index, 1);
        // 此时，第一个参数是当前分离出的元素所在数组；第二个参数temp是传入的leftArr去掉第一个后的结果
        arrange(tempArr.concat(item), temp); // 这里使用了递归
      });
    }
  };
  arrange([], arr);
  return res;
};

Mr.ws2024/6/2大约 2 分钟