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

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

步骤:
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'
        }
      }
    }

如图效果:
在这里插入图片描述

相关文章
|
2月前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。
130 10
|
5月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
6月前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
328 49
|
6月前
Vue3进度条(Progress)
这是一个基于 Vue2 的进度条组件,支持线性 (`line`) 和圆形 (`circle`) 两种模式。可通过多种属性自定义进度条的样式和行为,包括宽度、进度百分比、颜色、线宽、线帽样式等。此外,还支持显示进度文本或图标,并允许通过插槽自定义内容。该组件提供了丰富的配置选项,适用于多种应用场景。
677 5
Vue3进度条(Progress)
|
5月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
4月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
287 0
|
4月前
|
JavaScript API
vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
37 0
|
6月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
6月前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
98 1
|
6月前
|
JavaScript
基于Vue2+ElementUI/Vue3+ElementPlus对el-notification增加倒计时进度条特效,鼠标移入,暂停计时,鼠标移出,继续计时
本文介绍了如何在Vue2+ElementUI和Vue3+ElementPlus项目中对`el-notification`组件增加倒计时进度条特效,并实现鼠标移入通知时暂停计时,鼠标移出时继续计时的功能。
162 0

热门文章

最新文章