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

Posted 2021-10-07 白瑕

Transfer与进度条组件绑定

文章目录

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

---

前言

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

---

一、实现原理

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

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

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

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

二、实现流程

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

                <el-transfer
                  style="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-transfer
                  style="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>

---

总结