给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来封装了这个组件
大家看
包括我们可以隐藏他的进度显示
然后呢这是他的动画效果
那由于时间和篇幅的原因哈
关于这个组件的封装
我们下期视频继续分享
最后更新于
这有帮助吗？