vue3：el-table中嵌入进度条progress

最新推荐文章于 2024-11-25 08:00:00 发布

皮蛋瘦肉周_

最新推荐文章于 2024-11-25 08:00:00 发布

阅读量4.1k

点赞数 3

分类专栏：总结 vue前端文章标签： elementui vue.js javascript

lucky

本文链接：https://blog.csdn.net/weixin_44690047/article/details/122396216

版权

本文展示了如何在Vue3应用中使用Element UI的el-table组件嵌入进度条。通过在表格单元格内绑定进度条组件，并赋予固定值或动态从后端获取的值来显示进度。

摘要由CSDN通过智能技术生成

实现效果：

代码：

1.html：在表格的其中一列为进度条展示，需要绑定“progress”

<template>
    <el-table
      :data="tableData"
      height="600"
      style="width: 100%"
      :cell-style="rowClass"
      :header-cell-style="headClass"
    >
      <el-table-column prop="name" label="姓名" width="200" />
      <el-table-column  label="学习进度" prop="progress">
        <template #default="scope">
          <el-progress
            type="line"
            :text-inside="true"
            :stroke-width="20"
            :percentage="scope.row.progress"
            status="success"