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

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

相关文章
|
1月前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
16 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
2月前
|
JavaScript 前端开发
vue element-ui分页插件 始终保持在页面底部样式
vue element-ui分页插件 始终保持在页面底部样式
26 0
|
2月前
|
编解码
element-ui 表格滚动条(不同分辨率)自适应问题;
element-ui 表格滚动条(不同分辨率)自适应问题;
42 1
|
29天前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
2月前
|
JavaScript
【Ant designe vue】中有关表格列中日期展示 yyyy-mm-dd 格式问题
【Ant designe vue】中有关表格列中日期展示 yyyy-mm-dd 格式问题
23 0
|
2月前
|
JavaScript
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
25 1
|
2月前
|
JavaScript
vue中有关表格中的表格头中添加悬浮提示的ui问题
vue中有关表格中的表格头中添加悬浮提示的ui问题
19 1
|
8天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
14天前
|
JavaScript
vue element ui 打开弹窗出现黑框问题
vue element ui 打开弹窗出现黑框问题
19 1
|
14天前
|
资源调度 JavaScript 开发者
插件使用:扩展Vue功能与第三方插件
【4月更文挑战第23天】Vue凭借其轻量级和灵活性在Web开发中备受青睐,而插件则进一步增强了其功能。本文探讨了如何在Vue项目中选择、安装、配置和管理插件,以适应不同需求。要点包括:选择可靠且兼容的插件,使用npm或yarn安装,根据文档配置,以及注意性能影响。明智使用插件能提升开发效率,但需避免过度依赖,确保与项目目标和技术栈匹配。不断学习新插件,可保持技术领先并优化项目实践。