如何在Vuejs中根据数据库记录数计算进度条百分比

现有代码问题梳理 #

• 进度条宽度写死为4%，没有和实际记录数做动态绑定，进度不会随数据变化更新
• 没有做百分比边界限制，当记录数超过100条时，会出现宽度超出容器、百分比显示超过100%的异常
• 模板中同时直接取salaries.length和用计算属性salariesLength获取长度，逻辑冗余
• v-for循环的外层div标签缺失起始尖括号，会触发模板编译错误
• loading关闭逻辑位置不合理，接口报错时会一直保持加载状态

修复实现 #

1. 优化计算属性 #

新增专门的进度百分比计算逻辑，自动限制最大值为100%，避免进度溢出：

computed: {
  progressPercent() {
    // 1条记录对应1%，最大不超过100%
    return Math.min(this.salaries.length, 100)
  }
}

2. 修复模板逻辑 #

• 把硬编码的进度条宽度改为动态样式绑定
• 统一使用计算属性输出进度值
• 补全缺失的div标签语法
• 所有百分比展示位统一绑定进度值

修正后完整代码 #

<div class="mt-5">
  <div class="mt-2 mb-3 w-full">Progress of Goal: 
    <span class="text-indigo-600 font-semibold">{{ progressPercent }}% - {{ salaries.length }} Salaries submitted</span>
  </div>
  <div class="w-full bg-gray-200 rounded-full dark:bg-gray-500">
    <div 
      class="bg-purple-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" 
      :style="`width: ${progressPercent}%`"
    > 
      {{ progressPercent }}%
    </div>
  </div>
</div>
<div class="is-loading-bar has-text-centered" v-bind:class="{'is-loading': $store.state.isLoading}">
  <div class="lds-dual-ring"></div>
</div>
<div
  class="flex flex-col xl:flex-row justify-center items-stretch w-full"
  v-for="salary in salaries"
  v-bind:key="salary.id"
>
  <SalaryItem :salary="salary" />
</div>

<script>
import axios from 'axios'
import SalaryItem from '@/components/SalaryItem.vue'

export default {
  data() {
    return {
      salaries: [],
    }
  },
  computed: {
    progressPercent() {
      return Math.min(this.salaries.length, 100)
    }
  },
  components: {
    SalaryItem
  },
  async mounted() {
    this.$store.commit('setIsLoading', true)
    try {
      const response = await axios.get('/salaries/')
      this.salaries = response.data
    } catch (error) {
      console.log(error)
    } finally {
      // 无论请求成功/失败都会关闭loading，避免状态卡死
      this.$store.commit('setIsLoading', false)
    }
  }
}
</script>

效果说明 #

• 接口拉取到薪资数据后，进度条宽度、百分比数值会自动和记录数同步更新
• 记录数不足100条时按1条=1%的规则计算进度，达到100条后进度条保持满格状态，不会出现样式溢出
• 修复后所有模板语法符合Vue编译要求，原有列表渲染、加载状态功能不受影响

内容的提问来源于stack exchange，提问作者paniklas