Transfer与进度条组件绑定

文章目录

Transfer与进度条组件绑定
前言
一、实现原理
二、实现流程
三、完整代码
总结

前言

最近做的后台管理系统里使用了Element组件Transfer做了一个工作表,然后加了一个进度条来表示工作进度,我希望能将两者绑定起来;

一、实现原理

利用Element穿梭框提供的change事件来触发特定方法handleChange(),

向方法内传入参数event来获取:
发生改变的是哪边工作表( ‘right’ / ‘left’ );

传入参数tab来获取:
发生改变后关于右侧列表项的数组[ ];

使用公式进行值转换,将成品值赋值给用于决定进度条进度的data()里的this.percentage,来实时改变进度条进度.

二、实现流程

为工作表绑定change事件,绑定事件函数handleChange();
为工作表绑定v-model来绑定已经完成的事项,即右边工作表中的事项;
为工作表绑定:data来绑定全部事项,即左右工作表内的所有事项;

                <el-transferstyle="text-align: left; display: inline-block"v-model="finishedTask":props="{ key: 'id', label: 'name' }":titles="['待办', '待提交']"@change="handleChange":data="allTask"></el-transfer>

data()中加入属性"percentage",赋给数字类型值,绑定到进度条组件:

              <el-progress:percentage="percentage":color="customColors"></el-progress>

data()中加入allTask数组和finishedTask数组,表示左右所有事项和右边已完成事项:

//这是10个任务,修改任务数量请连携修改进度条驱动数值;allTask: [{ id: 1, name: "Task1" },{ id: 2, name: "Task2" },{ id: 3, name: "Task3" },{ id: 4, name: "Task4" },{ id: 5, name: "Task5" },{ id: 6, name: "Task6" },{ id: 7, name: "Task7" },{ id: 8, name: "Task8" },{ id: 9, name: "Task9" },{ id: 10, name: "Task10" },],finishedTask: [1, 3],

在methods中定义increase方法和decrease方法来实现进度条"能走"

    increase() {this.percentage += 10;if (this.percentage > 100) {//大于100不再相加this.percentage = 100;}},decrease() {this.percentage -= 10;if (this.percentage < 0) {//小于0不再减少this.percentage = 0;}},

定义handleChange方法来规定工作表左右比例和进度条进度的绑定规则:

     handleChange(tab, event) {console.log(tab,event); //输出格式: 'left', array(4)[1,2,3,4];this.percentage = (tab.length / this.allTask.length) * 100;//if (this.percentage == 100) {//  this.$message.success(//   "工作表已验收, " + this.userName + " , 请注意休息 ."// );}},

然后就可以了,最下面是进度条:

三、完整代码

我已经减掉那些无关代码了:

<template><el-transferstyle="text-align: left; display: inline-block"v-model="finishedTask":props="{ key: 'id', label: 'name' }":titles="['待办', '待提交']"@change="handleChange":data="allTask"></el-transfer><el-progress:percentage="percentage":color="customColors"></el-progress>
</template><script>
export default {name: "Home",data() {return {percentage: 20,customColor: "#409eff",customColors: [//5个阶段的颜色{ color: "#6f7ad3", percentage: 20 },{ color: "#f56c6c", percentage: 40 },{ color: "#e6a23c", percentage: 60 },{ color: "#1989fa", percentage: 80 },{ color: "#5cb87a", percentage: 100 },],//根据各个一级菜单的id将不同图标写入一级菜单allTask: [//所有任务{ id: 1, name: "Task1" },{ id: 2, name: "Task2" },{ id: 3, name: "Task3" },{ id: 4, name: "Task4" },{ id: 5, name: "Task5" },{ id: 6, name: "Task6" },{ id: 7, name: "Task7" },{ id: 8, name: "Task8" },{ id: 9, name: "Task9" },{ id: 10, name: "Task10" },],//初始已完成的任务;finishedTask: [1, 3],};},methods: {//这是规定进度条变色的方法;customColorMethod(percentage) {if (percentage < 30) {return "#909399";} else if (percentage < 70) {return "#e6a23c";} else {return "#67c23a";}},increase() {this.percentage += 10;if (this.percentage > 100) {this.percentage = 100;}},decrease() {this.percentage -= 10;if (this.percentage < 0) {this.percentage = 0;}},handleChange(tab, event) {this.percentage = (tab.length / this.allTask.length) * 100;if (this.percentage == 100) {this.$message.success("工作表已验收, " + this.userName + " , 请注意休息 .");}},},
};
</script><style lang="less" scoped>
</style>

总结

Element穿梭框Transfer与进度条组件绑定相关推荐

微信小程序 MinUI 组件库系列之 progress 进度条组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
vue 新手指引_精通react/vue组件设计之快速实现一个可定制的进度条组件
前言这篇文章是笔者写组件设计的第四篇文章,之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动",而是要根 ...
基于Vue的事件响应式进度条组件
写在前面找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容 ...
手把手教你实现一个 Vue 进度条组件！
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
数字进度条组件NumberProgressBar
数字进度条组件NumberProgressBar NumberProgressBar是一款数字进度条组件.它不仅可以通过进度条的变化展现进度,还可以通过跟随文字精确表示进度值.开发者可以对进度条进行 ...
【Android 应用开发】自定义圆形进度条组件
转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...
vue实现竖式步骤条_手把手教你实现一个 Vue 进度条组件！
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
Vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-cir ...
基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...

Element穿梭框Transfer与进度条组件绑定