el-progress在进度条内增加文字

 

<template>

  <div>

    <div class="content-view">

      <div v-for="(item, index) in progressList" class="item-view" :key="index">

        <el-progress

          :text-inside="true"

          :stroke-width="26"

          :percentage="setItemProgress(item)"

          v-if="!isNaN(parseInt((item.planNum / item.completeNum) * 100))"

          :status="setItemStatus(item)"

          :format="setItemText(item)"

        ></el-progress>

        <el-button @click="call"></el-button>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      index:0,

      arr:[1,2,3,5,6,8,7,9,33,55],

      num:40,

      progressList: [

        {

          planNum: 40,

          completeNum: 20,

        },

      ],

    };

  },

  mounted(){

    // let totalWidth = document.getElementsByClassName('el-progress-bar__inner')

    // let word = document.getElementsByClassName('el-progress-bar__innerText')

    // let str = word[0].innerHTML

  },

  methods: {

    call(){

      this.arr.push(num)

      

    },

    setItemProgress(data) {

      if (data.planNum > data.completeNum) {

        return 47;

      } else {

        return parseInt((data.planNum / data.completeNum).toFixed(1) * 100);

      }

    },

    setItemText(row) {

      return () => {

        // return "计划： " + row.planNum + "，完成： " + row.completeNum;

        return "进度条为40%";

      };

    },

    setItemStatus(data) {

      if (data.planNum > data.completeNum) {

        return "exception";

      } else if (data.planNum === data.completeNum) {

        return "success";

      } else {

        return "warning";

      }

    },

  },

};

</script>

<style lang="scss" scoped>

::v-deep .el-progress-bar__inner,

::v-deep .el-progress-bar__outer{

  border-radius: 0;

}

//字体显示

::v-deep .el-progress-bar__innerText {

  margin-right: -40px;

}

.content-view {

  height: calc(100vh - 84px);

  background-color: #ffffff;

  padding: 20px;

}

.item-view {

  margin-bottom: 1rem;

}

</style>