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

最新推荐文章于 2025-11-09 11:58:10 发布

原创最新推荐文章于 2025-11-09 11:58:10 发布 · 4.4k 阅读

11 ·

CC 4.0 BY-SA版权

lucky

文章标签：

#elementui #vue.js #javascript

总结同时被 2 个专栏收录

87 篇文章

订阅专栏

vue前端

17 篇文章

订阅专栏

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

实现效果：

代码：

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"
          ></el-progress>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

2.js文件：给进度条赋值（此处为固定的值，也可以将后端传过来的值进行赋值）

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "完全",
          progress: 50,
        },
        {
          name: "金田一客人",
          progress: 80,
        },
      ],
    };
  },
methods: {
    // 表头样式设置
    headClass() {
      return "text-align: center;background:rgb(242,242,242);color:rgb(140,138,140)";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
}