给table每一行下面增加进度条功能的思路

大家看这小伙伴的问题啊

他说想给表格的每一行下面

加一个进度条的功能

因为是放在每一行的下面

所以我们首先想到的就是用

tr的这个伪类

::after来实现

但是啊

我后来发现事情没有想的那么简单

我们先来看一下为什么啊

我们先来写一个

tr::after

然后呢先写一个content

123吧

好这content上来了

然后我们把它改成position等于absolute

然后left等于

然后bottom等于

因为用了absolute嘛

我们还需要把tr改成

relative(自绝父相)

position等于relative

然后把这个123去掉,我们改一下宽高

我们先把高度改成2像素

然后宽度呢我们采用j进度50%(比如说)

加一个背景颜色

嗯先用红色吧

好大家看效果出来了

但是它在Safari下边是不行的

大家看这个红色的条跑到哪了

跑到最下边来了

为什么会这样呢

后来发现原因是在Safari里边

给TR设置成relative是不生效的

我在网上呢也找到了这个bug

在今年5月份有人提交的

然后下面有一个回复

是写的这样的东西

我上网搜了一下

这个就代表着苹果官方已经

收录了这个bug

所以呢

再回过来我们就不能用这种方案了

所以呢我们先把这个

relative去掉

然后呢我们啊先把这个bottom去掉

大看bottom去掉之后

它每一行的线的位置

是在这一行的最上面

然后它左边的位置跑到了屏幕边缘呢

是因为我们没有这个tr的relative了

所以呢我们把table设置成position relative

起码它左边是没问题的

大看现在只是top有问题了

那top不能用的话我们可以用margin

margin top这个值是多少呢

我们需要看一下这个TR有多高

现在是22.

我们减去2像素我们设置成

大看这样效果就出来了

但是呢这个margin top不能写死

因为它这行里边有可能被称高了

所以呢这个margin top需要是动态的

那怎么能让这个值是动态的呢

这个就有难度了

因为现在是用伪类来实现的

我们用JS

也很难修改到这个伪类的样式

不过呢我们之前有一期视频也提到了

就是用(css)变量

我们在这先引用一个变量

假设它已经存在了

我们就叫

row-height

然后这个变量在哪设置的呢

就在这每一行上我们可以给它style

然后

row height

我们先给它写死啊10px

大家看 第一行他已经就可以了

后边两行我们先不管他

这样就说明这么用没问题

那就涉及到了

这个值怎么让他是动态的

我们就要监听这个表格的尺寸的变化

然后呢动态来设置这个变量

那怎么来监听表格尺寸的变化呢

给大家分享一个类库,就是这个

那我现在呢已经引入来了哈

我先把这个代码复制一下

这个是它使用方法

在下边写一个script

然后把这个粘过来

这块来写

我们要监听的元素我们现在这个地方是mytable

然后里边它用了循环

因为它这可以监听多个

所以它这里边可能会接收到多个

我们现在只监听了一个就不用循环了

直接通过entries[0]

然后.target来拿到这个table元素

const table

然后呢我们来设置它里边tr的

实际高度就行了

table. 我们先找到那些tr

querySelectorAll('tr')

那遍历

row height

等于offsetHeight

好我们先来看一下效果

大家看他每一行都有一个

然后呢我把它撑高

为了让他(可以)撑高呢

给这个table加一个可编辑的属性(contenteditable):true

好大家看我一回车这就变了

现在是41再回车

然后这个线(的margin-top)也没问题

只是呢这个线(的margin-top)我需要再减一下(自身高度)

现在margin-top是整个row-height

我们再加一个计算

--row-height减去2像素

这个2像素就是它自身的线的高度

大家看这样就没问题了

然后呢换行

这样就是自动的了

那接下来还有一个问题就是这个线的

(宽度)百分比的问题也不能写死

其实也是一样的道理我们在这啊假设

它有一个变量叫var

--process-value

然后呢这个值呢

我们就在每一行上来写声明就行了

具体的话到时候用代码来控制就行了

process value比如说30%

大家看 现在只有第一行有进度

然后呢我们在这改一下看一下效果

打开这就可以了

现在没有动画我们再加一动画

穿三神等于YS

然后呢0.5秒

ease-in-out

好我们再来试

一下现在是三十

九十看看

好这样就可以了

我们再来看一下Safari浏览器

刷新一下

大家看 也没问题

换行

也没问题

好有了这个思路呢

我们就可以封装组件了

因为我对这个element plus不是很熟

所以我拿element 2.0来封装了这个组件

大家看

包括我们可以隐藏他的进度显示

然后呢这是他的动画效果

那由于时间和篇幅的原因哈

关于这个组件的封装

我们下期视频继续分享

最后更新于