VUE element-ui之el-table表格内嵌进度条功能实现

阳光穿透心脏的1/2处 2022-09-02 12:52 284阅读 0赞

**步骤：**  
***el-table中使用插槽方法：***

<el-table-column prop="num" label="里程数" sortable="" width="250" >
              <template slot-scope="scope">
                <el-progress type="line" :percentage="(scope.row.num)/percent*100" :format="format(scope.row,scope.column)" color="#57DCDD" :text-inside="false" :stroke-width="12" />
              </template>
            </el-table-column>
            注意：percent为表格第一位num值（后端返回数据为排序后数据），相当于以第一位为基准实现进度条，这样视觉效果较好（第一位进度条为充满状态）

***格式化进度条列显示文字：***

format(row, column) { 
          return () => { 
            if (column.label === '里程数') { 
              return row.num + 'km'
            }
          }
        }

***如图效果：***  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/511c330d9518422a9d65336112ab7391.png

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue系列之顶部进度条（NProgress）

一、Vue顶部进度条（实战） 1、安装nprogress插件 1. 本地引入 <script src='nprogress.js'></script>

秒速五厘米/ 2023年07月06日 11:45/ 0 赞/ 73 阅读

相关 vue 环形进度条

![在这里插入图片描述][20201009093934659.png_pic_center] cnpm install vue-circleprogressbar

客官°小女子只卖身不卖艺/ 2022年12月13日 01:29/ 0 赞/ 264 阅读

相关实现一个圆形进度条（vue）

实现方式：首先是用svg画两个圆，同圆心同半径的两个圆，然后把颜色都设置成透明，利用圆的边框来实现。给两个圆设置相同的边框宽度，并且设置颜色（设置一个透明，一个有颜色）；然后创

淡淡的烟草味﹌/ 2022年12月07日 12:21/ 0 赞/ 456 阅读

相关 vue + elementUI 实现表格的打印和下载

这篇文章主要介绍前端根据 table 表格里面已有的数据实现的下载功能，不需要调用接口，只是纯前端的一个功能实现；顺便介绍一下打印功能。 1、打印获取表格数据，调用

ゝ一世哀愁。/ 2022年10月28日 03:54/ 0 赞/ 388 阅读

相关 vue中进度条

最终实现的效果是这样的。 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudW

梦里梦外;/ 2022年09月12日 12:47/ 0 赞/ 210 阅读

相关 VUE element-ui之el-table表格内嵌进度条功能实现

步骤： el-table中使用插槽方法： <el-table-column prop="num" label="里程数" sortable="" width="2

阳光穿透心脏的1/2处/ 2022年09月02日 12:52/ 0 赞/ 285 阅读

相关 vue——Nprogress进度条功能实现

下图中的这种顶部进度条是非常常见的，在`vue`项目中有对应的插件。`Nprogress` ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

傷城~/ 2022年08月31日 15:15/ 0 赞/ 928 阅读

相关 android之进度条的实现

package com.example.administrator.progress; import android.app.Activity;

叁歲伎倆/ 2022年05月24日 10:51/ 0 赞/ 220 阅读

相关 python 实现简单的进度条功能。

import time import sys n = 100 输出，0% sys.stdout.write("0%" +

阳光穿透心脏的1/2处/ 2022年02月04日 12:39/ 0 赞/ 317 阅读

相关 Vue - 纯前端（Vue + ElementUI）实现 table 表格分页功能

一. 思路 1. 如何获取当前页数据的第一条和最后一条的数据在总数据中的位置 2. 获取到当前页数据的第一条和最后一条的数据在总数据中的位置，怎么获取到对应的数据 3

柔情只为你懂/ 2021年07月25日 17:36/ 0 赞/ 583 阅读