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'
        }
      }
    }

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

相关文章
|
15天前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。
99 10
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
|
26天前
「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现
本篇将带领你实现一个倒计时和提醒功能的应用,用户可以设置倒计时时间并开始计时。当倒计时结束时,应用会显示提醒。该项目涉及时间控制、状态管理和用户交互,是学习鸿蒙应用开发的绝佳实践项目。
69 2
「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现
|
3月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
4月前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
280 49
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
169 0
|
4月前
Vue3进度条(Progress)
这是一个基于 Vue2 的进度条组件,支持线性 (`line`) 和圆形 (`circle`) 两种模式。可通过多种属性自定义进度条的样式和行为,包括宽度、进度百分比、颜色、线宽、线帽样式等。此外,还支持显示进度文本或图标,并允许通过插槽自定义内容。该组件提供了丰富的配置选项,适用于多种应用场景。
502 5
Vue3进度条(Progress)
|
3月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
2月前
|
JavaScript API
vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
32 0
|
3月前
|
搜索推荐 前端开发 C#
推荐7款美观且功能强大的WPF UI库
推荐7款美观且功能强大的WPF UI库
146 2
|
4月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
下一篇
DataWorks