vue 死循环问题，报错 you may have an infinite update loop in a component render function

效果图

问题: 鼠标悬停的时候，tooltip第一次不会展示，第二次才展示，控制台报错死循环

原因：在于'width': _countCurPercent(item.time),这行代码，你会发现把width换成一个固定值就正常了

解决办法

参数传item.time进去，即 _countCurPercent(item.time)

源码如下：(修改之前的)

<template>
    <div class="c-progress">
        <el-tooltip effect="dark" placement="top" :key="index" v-for="(item, index) in timeByTypes">
            <div slot="content">{{ _getTypeValue(item.type) + "：" + item.time + "h" }}</div>
            <div class="c-progress-item" style="left:0;z-index:3;"
                :style="{ 'width': _countCurPercent(item), 'background-color': _getTypeColorValue(item.type) }">
            </div>
        </el-tooltip>
    </div>
</template>
  
<script>
export default {
    name: 'CProgress',
    props: {
        timeByTypes: {
            type: Array,
            default: () => []
        },
        totalTime: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            tooltipDisabled: false,
        }
    },
    methods: {
        // 算出百分比
        _countCurPercent(item) {//直接传time过来，而不是一整个对象过来，防止死循环
            let tempPercent = Math.ceil(parseInt(item.time / this.totalTime * 100))
            return tempPercent + "%";
        },
        //获取颜色值
        _getTypeColorValue(type) {
            switch (type) {
                case 0:
                    return "#ACE2C5";
                    break;
                case 1:
                    return "#ADCBFF";
                    break;
                case 2:
                    return "#FF9100";
                    break;
                case 3:
                    return "#DE3C36";
                    break;
                case 4:
                    return "#8BCDFF";
                    break;
                case 5:
                    return "#26D254";
                    break;
                case 6:
                    return "#FF5700";
                    break;
                case 7:
                    return "#AAAAAA";
                    break;
                default:
                    return "#74D8C8"; //type为null时，展示的默认颜色
                    break;
            }
        },
        //获取工时类型
        _getTypeValue(type) {
            switch (type) {
                case 0:
                    return "设计";
                    break;
                case 1:
                    return "研发";
                    break;
                case 2:
                    return "部署";
                    break;
                case 3:
                    return "测试";
                    break;
                case 4:
                    return "文档";
                    break;
                case 5:
                    return "产品";
                    break;
                case 6:
                    return "调研";
                    break;
                case 7:
                    return "其他";
                    break;
                default:
                    return "无";
                    break;
            }
        },
    }
}
</script>