Transfer与进度条组件绑定
@TOC
前言
最近做的后台管理系统里使用了Element组件Transfer做了一个工作表,然后加了一个进度条来表示工作进度,我希望能将两者绑定起来;
一、实现原理
利用Element穿梭框提供的change事件来触发特定方法handleChange(),
向方法内传入参数event来获取:
发生改变的是哪边工作表( ‘right’ / ‘left’ );
传入参数tab来获取:
发生改变后关于右侧列表项的数组[ ];
使用公式进行值转换,将成品值赋值给用于决定进度条进度的data()里的this.percentage,来实时改变进度条进度.
二、实现流程
为工作表绑定change事件,绑定事件函数handleChange();
为工作表绑定v-model来绑定已经完成的事项,即右边工作表中的事项;
为工作表绑定:data来绑定全部事项,即左右工作表内的所有事项;
1 | <el-transfer |
data()中加入属性”percentage”,赋给数字类型值,绑定到进度条组件:
1 | <el-progress |
data()中加入allTask数组和finishedTask数组,表示左右所有事项和右边已完成事项:
1 | //这是10个任务,修改任务数量请连携修改进度条驱动数值; |
在methods中定义increase方法和decrease方法来实现进度条”能走”
1 | increase() { |
定义handleChange方法来规定工作表左右比例和进度条进度的绑定规则:
1 | handleChange(tab, event) { |
然后就可以了,最下面是进度条:
三、完整代码
我已经减掉那些无关代码了:
1 | <template> |
总结
_