雪花的博客

问题背景

首先看下面这段代码。

遇见了一个需求，需要在部门选择的时候，名称前面加上一级部门。

但是，很多地方都用到了这个封装的组件。如何让这个地方优雅的处理掉，又不影响到别的地方呢?

解决思路

我想到了一个点子。子组件判断父组件有没有传递插槽。如果传了的话，就给elOption传递处理选择显示的插槽。

经过我一番查阅文档和百度，发现setup语法糖没法实现。只能改成setup加return那种。

setup函数里第二个参数中去接收slot插槽。然后利用jsx的灵活性就能够优雅地实现需求了。

为什么使用JSX

为啥要用jsx?因为template中给Eloption传递插槽没法用对象的方式，只要对应上了插槽名Eloption就会渲染。

代码实现

代码见下图：

代码详情

需求背景

如图所示，element-plus中所带的，这些折叠屏折叠行、这些功能可能并不是我们想要的。

最近有一个需求，就是表格如果超出了某行，遍将多余的行数给进行折叠。

那么,有什么办法能够给element-plus添加易于维护的拓展代码吗?

我也自行百度过一番，但是百度上的答案，很明显并不是我想要的。

经过我一番思索，想到了css的序号选择器。序号选择器专门写一个子元素超过3隐藏的类型名。

CSS样式实现

样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.el-folding > tr:nth-child(n + 4) {
    display: none;
}
.el-folding-line {
    transition-duration: 200ms;
    cursor: pointer;
    border-bottom: 1px solid var(--el-table-border-color);
}
.el-folding-line:active {
    background-color: #F5F6FB;
}
.el-folding-extends {
    /*cursor: pointer;*/
    transition-duration: 400ms;
}
.el-folding-extends.rotate {
    cursor: pointer;
    transform: rotate(180deg);
}

Vue自定义指令实现

如何让这个功能易于使用和维护，我这里想到了使用vue的自定义指令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// element-table折叠指令
app.directive('elfold', (el, binding) => {
  const elBody = el.querySelector(".el-table__body>tbody")
  const elBodyC = elBody.children
  if (elBodyC.length > 3) {
    // 给表格添加只展示三行的类名
    if (el.querySelector('.rotate')) {
      elBody.classList.remove('el-folding')
    } else {
      elBody.classList.add('el-folding')
    }
    // 判断有没有创建过面板
    const foldingLine = el.querySelector('.el-folding-line')
    if (foldingLine) {
      if (el?.removeElement) {
        el.removeElement(foldingLine)
      }
    }
    if (!foldingLine) {
      // 创建折叠面板元素
      const extendsTop = document.createElement('div')
      extendsTop.className = "flex-ct p5 el-folding-line"
      const extendsTopButton = document.createElement('i')
      extendsTopButton.className = "fa fa-angle-down el-folding-extends"
      extendsTopButton.style.fontSize = "30px"
      extendsTop.append(extendsTopButton)
      el.append(extendsTop)
      // 控制变量
      let controller = true
      extendsTop.addEventListener('click', () => {
        if (controller) {
          extendsTopButton.classList.add('rotate')
          elBody.classList.remove('el-folding')
        } else {
          extendsTopButton.classList.remove('rotate')
          elBody.classList.add('el-folding')
        }
        controller = !controller
      })
    }
  } else {
    elBody.classList.remove('el-folding')
  }
})

效果展示

诺，最后的效果就如图所示了。

数组操作的性能问题

看下面这段代码：

1
2

const arr = [1, 2, 3, 4, 5]
arr.unshift(0)

比如像上面那两行代码, 大家都知道数组是有下标的。

如果往输入前面插入一个元素，那么后面的所有元素下标整体都是会往后移动的。这个数组的下标移动，一旦数据量过多的话，就会造成很严重的性能损耗。

实际应用场景

场景一：物联网项目

例如: 物联网项目，一个设备的模板，数据量大的可能有几千个参数。如果把第一个删除删除了，后面恐怖的数据量的下标前移，会给页面造成大概一秒钟的卡顿感。

场景二：滑动加载页面

再比如一些滑动加载的页面，那个页面还具有，自己的文章能右滑删除的功能。

如果存放文章的数据到达了一定数量，用户再删除文章，如果我们重新请求接口，加载列表。这样显然，用户的体验是更不好的。一般在接口请求删除成功后，对本地的那个文章在进行删除。但是，显然有时候也会造成不好的体验。

解决方案

这个时候链表这种数据结构, 再配合上es6的迭代器就很合适了。

代码见以下链接：

双端循环链表

为什么需要IndexDB

前端加载某些过大的静态文件，而且还是无法被浏览器缓存的资源时。每次都要浪费很多时间。

比如three.js需要使用的建模文件。如果只有几十kb，几MB的话倒还好。如果模型文件十多M，甚至是几百多M的话。每次关闭网页再重新打开，就又重新加载一遍。长时间的重复等待实在是倒人胃口。

这个时候就可以用indexDB将这些大型文件存起来。避免重复加载这些资源，而倒人胃口。

使用体验

关于这个问题，我自己钻研了一下，并且封装了一个操作IndexDB的方法(详情见文章下链接)。

有一说一，这个东西比MongoDB难用。不能够直接新建表，必须每次在升级数据版本的时候，触发的周期里才能去新建。实在是，太难受了。

相关资源

IndexDB使用方法

项目需求

这几天公司做一个项目，遇见了一个需要拖拽表格顺序的项目。

但是UI用的又是element。是没有这个功能的，所以自己就手写了一个插件。

发在了github上面。如果有需要用到的朋友可以移步下面。

代码地址