vue 如何表格单元格中渲染进度条显示进度

在数据报表或管理后台中，用进度条直观展示任务完成度、资源利用率或评分等数值，能极大提升数据的可读性。vxe-table 通过内置的 progress 渲染器，让你在表格单元格中一键渲染进度条，并支持丰富的自定义样式和交互。

配置

在列定义中，通过 cellRender 属性指定渲染器为 'progress'，即可将字段值以进度条形式展示。

{
  field: 'num41',
  title: '进度条',
  cellRender: { name: 'progress' }
}

默认进度条的最大值为 100，因此字段值应介于 0~100 之间。

代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const num41CellRender = reactive({
  name: 'progress'
})
const num42CellRender = reactive({
  name: 'progress',
  props: {
    max: 10,
    height: 30,
    completedBgColor: '#D48265',
    label: {
      formatter: '{{value}}个'
    }
  }
})
const num43CellRender = reactive({
  name: 'progress',
  props: {
    completedBgColor({ row }) {
      if (row.num43 > 80) {
        return '#8de0ba'
      }
      if (row.num43 > 60) {
        return 'e0c43c'
      }
      return '#f18582'
    }
  }
})
const gridOptions = reactive({
  border: true,
  showOverflow: true,
  height: 500,
  columnConfig: {
    resizable: true
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'num41', title: '进度条100', width: 180, cellRender: num41CellRender },
    { field: 'num42', title: '进度条10', width: 180, cellRender: num42CellRender },
    { field: 'num43', title: '进度条多颜色', width: 180, cellRender: num43CellRender }
  ],
  data: [
    { id: 101, name: 'test1', num41: 60, num42: 8, num43: 80 },
    { id: 102, name: 'test2', num41: 30, num42: 5, num43: 50 },
    { id: 103, name: 'test3', num41: 71, num42: 9, num43: 60 },
    { id: 104, name: 'test4', num41: 97, num42: 4, num43: 100 },
    { id: 105, name: 'test5', num41: 100, num42: 4, num43: 70 },
    { id: 106, name: 'test6', num41: 85, num42: 9, num43: 55 },
    { id: 107, name: 'test7', num41: 50, num42: 10, num43: 60 },
    { id: 108, name: 'test8', num41: 73, num42: 4, num43: 100 },
    { id: 109, name: 'test9', num41: 43, num42: 7, num43: 40 },
    { id: 1010, name: 'test10', num41: 66, num42: 6, num43: 88 }
  ]
})
</script>

参数说明

属性	类型	默认值	说明
max	number	100	进度条的最大值（字段值 / max 计算百分比）
height	number	默认行高	进度条的高度（px）
completedBgColor	string	Function	主题色
uncompletedBgColor	string	#e9ecef	未完成部分的背景色
label	object	—	标签配置，支持 formatter 格式化文本
label.formatter	string	'{{value}}%'	标签模板，{{value}} 为当前值，{{percent}} 为百分比
showLabel	boolean	true	是否显示数值标签
borderRadius	number	0	进度条圆角半径（px）
striped	boolean	false	是否显示条纹效果
stripedAnimated	boolean	false	条纹是否动画流动

通过 cellRender: { name: 'progress' }，vxe-table 让进度条的渲染变得极其简单。同时，丰富的 props 属性允许你定制最大值、高度、颜色、标签格式，甚至根据数据动态调整样式，满足各种业务场景。

需求	实现方式
基础进度条	cellRender:
自定义最大值	props:
自定义标签	props: { label: { formatter: '{{value}}%' } }
动态颜色	props: { completedBgColor({ row }) { ... } }
条纹动画	props:

无论是简单的数据展示，还是复杂的颜色分级，vxe-table 的进度条渲染器都能轻松实现。

https://vxetable.cn