el-table每行下面实现进度条的效果封装全过程完整版
大家好啊
接着上期我们来看一下
在el-table里边
怎么来实现这种进度条的效果
首先呢我准备了一个原始的el-table
现在还没有这个样式
所以呢我们先把上一期的这个样式
拿过来
拿过来之后
只不过我们现在这是写死的40%
然后margin-top是49像素
大看现在就有这效果了
然后剩下就两件事
一个是把这个宽度改成动态的
一个是把margin-top改成动态的
我们先来简单的这个宽度
我们上期也说了宽度要改成一个变量
所以我先把它注掉
换成下边这个
这个变量要在哪去设置呢
上期也说了在tr里
所以呢我们要借助
el-table的这个row-style
我们在这个el-table上
写一个
row-style
然后呢
我们在下边写一个这rowStyle方法
在Method里row-style
这里边呢我们需要
接收一个row
然后呢我们需要在这里边
直接返回一个
process
值是什么呢
我们现在每一个对象都有这个属性
大家看：是0-
所以呢
我们需要把这个属性乘以一个
row-process乘以100，百分号
我们再来看一下效果
大家看 现在这个宽度就可以是动态的了
下边两个是0所以他没有
然后呢
第二件事就是我们需要把这个
margin-top也改成
动态的
那这个怎么处理呢
这个row-height上期我们说了是监听表格的
尺寸变化来实现的
那在el-table里我们可以这样
我们先看一下它这里边的源码哈
下边它有一个
这个方法resizeListener
就是说他这已经做好了
这个listener监听了
所以呢我们
大家看他在下边会调this.doLayout
所以啊
我们的思路就是重写一下这个doLayout
我们可以封装一个组件
来继承这个el-table
我在这个components里边
新建一个el-table6.vue
然后呢
我们在这里边写这个组件
template不要了
首先呢我们把这个table导进来import
table
from
然后呢我们继承自（extends Table）
我们先什么也不写
再把这个组件放过来
然后呢我们在下边导一下
import
Table6 from
components/el-table6 然后呢
注册一下这个组件component
我们也可以在全局注册啊
我就直接在这写了
把这改成Table6，好我们再刷新一下
大家看 跟刚才没有区别对吧
好那我们就来复写这个方法
methods
然后呢我们把这个方法名复制过来
doLayout
这里边我们要调用一下原来的逻辑
就是正常来说我们需要调用父类的吗
因为我们是继承的
但是在这地方呢没办法直接访问父类
所以我们可以变一种方法
我们直接取到这个
Table.methods.doLayout
然后call this
把this传进去
这样的话呢
就能调原来的那个table的doLayout
然后我们在这下边再去做自己的事
我们需要先找到这个table的
标签this.$el
然后呢像上期一样
table.querySelectorAll，把所有的tr找到
然后呢
我们需要设置高度
稍微改一下
点儿
.style.setProperty
这里边儿我们设置一个--row-height
tr.offsetHeight
好我们再来试一下
还不行，大家看 --row-height还是0为什么呢
因为他没有改变尺寸
看看我把它拖动一下
哎这样就行了
那怎么办呢
我们可以在这个
vue的
updated的这个钩子里面
执行一下这些
所以呢我们需要把它提取成一个方法
比如 syncEachRowHeight
好这样调一下
然后呢我们在这this点调一下
然后再updated里边也调一下
好再来看一下
大家看 上来就可以了
现在这个高度他也有了
到此呢这个进度条已经出来了
那怎么来控制它的隐藏与显示呢
这个也简单
我们呀现在用的是TR的伪类（伪样式）
我们把它改成一个其他的
我们自己写的样式
比如说row-process
这样的话呢
就只有
这个类样式的tr才会有这个效果
那我们怎么给
不同的tr动态加这个样式呢
关于这个我们可以利用
el-table的这个row-class-name来实现
我们在上面
在这row-class-name等于
然后呢我们下边再写一个rowClassName
我们在这儿
rowClassName
然后呢我们把这个改成
动态的
show-process我们改成
row-process 然后呢
是不是showProcess
我们每一个对象都有这个
属性我们再来试一下
隐藏显示
隐藏显示这个显示现在是
所以它没有隐藏
到此呢一个基本的效果就出来了
但是有意思的还在后边
我就想啊
怎么能把它封装的再优雅一点
也就是
这两个方法能不能把它再封装进去
后来我就看源码里边
他传进来的这两个方法其实都是
继续往里传
传递到了另一个组件里叫table-body里边
所以呢
其实啊这两个东西我们是可以覆盖的
好我直接把它拿过来先
好然后呢
这块我们先写死
比如说40%
然后这个就写上出
好样式也是样式也可以拿过去
这个穿透就不用了
我们来看一下他会有什么问题
刷新一下
注意看他会报个警告
虽然效果可以了
为什么呢
原因是啊
这两个方法
原本在el-table里就有这两个属性
所以呢当我们再用这两个名字
去写方法的时候呢
el-table就会报警告认为它重名了
那怎么处理呢
我们呀可以在这直接把它删掉delete
table就是在继承之前把它删掉
pros.rowStyle
然后呢rowClassName
只是啊注意！如果你这么删的话
你这个组件就不能放到main.js
全局引用
如果放到main.js全局引用
然后还这样删的话
就会影响其他的table
所以啊如果想把这个组件
放到全局引用的话呢
可以这样写
我们先const一个TableClone，克隆一个
我们用浅克隆就行
Object.assign
把这table克隆出来
克隆扩展出来能不能直接
删这个props的属性啊
也不能因为它是浅克隆
所以我们还需要把这个
props也克隆一下
= Object.assign
这个就不要了
好这样的话呢我们
如果你把这个放到全局也没问题
然后呢我们去继承这个tableClone的
下边调doLayout的时候呢
也调这个克隆
那就行了
然后呢我们再回到
刷新一下
大看这回就不报错了
然后剩下的就简单了
我们就想办法把它取到一个动态的值
我们在这需要拿到肉的这个属性值
row.什么呢
这个process但这个process啊
我们先写死过来
乘以100好看一下
哎大家看 这样就行了
那这个process怎么能传递进来呢
我们一样
这个就简单了
我们在这准备一个props就行了
props
我们在这写一个propName4ProcessValue
String类型的就行了
然后判断这个值有没有啊
我们就假设他有了
直接在这取就行了
this.
然后呢在外边传递一下
这两个就不用传了
我们直接传一个
然后把这个属性值拿过来
好我们先看一下效果
大家看就可以了
那剩下的呢我就不一个一个演示了哈
给大家看一下我最终封装好的
用的时候呢就是这个el-table
首先呢我们保证
这个data至少要有一个process属性
能代表着百分比的从0到1之间的数
然后呢
showPprocess看你需求可以有可以没有
没有这个属性呢它就自动显示这个了
然后我们在el-table上
把这个属性名
用这种方式指定好就可以了
我们来看一下
就是这个页面
然后呢这个动画的效果
就跟组件的封装没关系了
这个就完全是我们自己通过
setTimeout来
设置这个process的值来实现的
真实情况下肯定要跟业务绑定的
进行到百分之多少了
那这个组件啊
还是我放在之前的这个demo里边了
最后更新于
这有帮助吗？