elementUi 组件--el-table
【需求】在element中,将表格中的数据进行处理,然后渲染出来。例如,将数据保留小数点后两位显示。
【知识点】formatter:用来格式化内容
【分析】在element 的table中,实现的过程是,数据需要绑定在 :data="tableData" 中,然后通过prop读取tableData中的key,这样一列的数据即可显示出来。现在需要对返回的数据进行格式化,可以用formatter属性,例如在“手续费”中,需要对数据进行保留两位小数,通过调用handelFix函数。
注:这里在handelFix函数中,要通过传入property获得当前那一列的prop值,不然获取不到值。
template
<el-table :data="tableData"
stripe
empty-text
v-loading="listLoading"
element-loading-text="拼命加载中"
style="width: 100%"> <el-table-column
:formatter="handelFix"
prop="fuwufei"
label="手续费">
</el-table-column>
<el-table-column
prop="zhuangtai"
label="状态" width="160">
</el-table-column>
<el-table-column
prop="zizhuangtai"
label="子状态" width="160">
</el-table-column>
<el-table-column
prop="shenheren"
label="审核人">
</el-table-column>
<el-table-column
label="备注">
<template scope="custom">
<el-button type="text" @click="open(custom.row.userId)">详情</el-button>
</template>
</el-table-column>
<el-table-column prop="" fixed="right" width='150' label="操作">
<template scope="scope">
<router-link :to="{ path: 'actionRecord', query: { gnhid: '5905d474b74e756d40b6a7a7' }}"><el-button type="warning" size='mini'>操作记录</el-button></router-link>
<router-link :to="{ path: 'newPage', query: { userId: scope.row.userId,gnhId:''}}" v-show="!zhijianIsShow"><el-button type="success" size='mini' >新页面</el-button></router-link> <router-link :to="{ path: 'newPageZhijian', query: { userId:'',gnhId: scope.row.id }}" v-show="zhijianIsShow"><el-button type="success" size='mini' @click="">质检页面</el-button></router-link>
</template>
</el-table-column>
</el-table>
script
handelFix(row, column){
return row[column.property].toFixed(2)
},
elementUi 组件--el-table的更多相关文章
- Element-ui组件库Table表格导出Excel表格
安装npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsxhttps://github.c ...
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
- 基于element-ui封装一个Table模板组件
大家在做后台管理系统的时候,写的最多的可能就是表格页面了,一般分三部分:搜索功能区.表格内容区和分页器区.一般这些功能都是使用第三方组件库实现,比如说element-ui,或者vuetify.这两个组 ...
- 八、vue使用element-ui组件
element-ui组件 1.引入element import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element- ...
- Element-UI中关于table表格的样式操作
项目中使用到element-ui组件库,经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比 ...
- html单页面通过cdn引入element-ui组件样式不显示问题
html单页面通过cdn引入element-ui组件样式不显示问题 必须先引入vue,再通过cdn引入element,否则element-ui组件与样式无效. <!DOCTYPE html> ...
- 如何引入iconfont图标与Element-UI组件
一.iconfont图标 iconfont方便又好用,介绍一下如何在vue项目中引入iconfont 1.进入iconfont官网 www.iconfont.cn 2.登录自己账户 3.选择图标后下载 ...
- element-ui 中的table的列隐藏问题
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...
- ElementUI组件库常见方法及问题汇总(持续更新)
本文主要介绍在使用ElementUI组件库的时候,常遇见的问题及使用到的方法,汇总记录便于查找. 1.表单 阻止表单的默认提交 <!-- @submit.native.prevent --> ...
- 详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...
随机推荐
- Create Fiori List App Report with ABAP CDS view – PART 2
In the Part 1 blog, we have discussed below topics CDS annotations for Fiori List Report. How to cre ...
- git的关于测试的相关的内容
今天,我们来讲一下git的分支的一些内容,在以前的时候,我一直都以为,对于一个项目,这个时候,我们把这个项目叫做项目a项目,这个a项目有master,staging,以及我自己的分支xxx,当我想上测 ...
- C++基础语言知识大汇总(不断更新!!!)
经过十天的时间,LITTLESUN做好了前期的工作,今天LITTLESUN就要在新地图里扬帆起航喽!!!(撒花) 简单的整理了一下这次启航准备好的物资.后面的航程中也会不断来补充这个小仓库哦!
- vTaskDelete(NULL)使用注意事项
在实际开发过程中,记录犯过的一个错误,如下 vTaskDelete(NULL); iccid_return_num = ; 错误原因分析,在任务删除之后(调用vTaskDelete(NULL)之后), ...
- 【多线程】 Task ,async ,await
[多线程]Task ,async ,await 一. WinForm 里经常会用到多线程, 多线程的好出就不多说了,来说说多线程比较麻烦的地方 1. UI 线程与其他线程的同步,主要是 Form 和 ...
- 《.NET 微服务:适用于容器化 .NET 应用的体系结构》关键结论
作为总结和要点,以下是本指南中最重要的结论.1 使用容器的好处: 基于容器的解决方案有节约成本的好处,因为容器是针对生产环境中缺少依赖而导致的部署问题提出的解决方案.容器能够显著改善devops和生产 ...
- Python 常见的字符串操作
1.strip.lstrip和rstrip 描述: 用于移除字符串左右两边.左边.右边指定的字符(默认为空白符,例如:/n, /r, /t, ' ')或字符序列. 语法: str.strip([cha ...
- SQL 注入教程
SQL 注入测评教程 1 准备 安装包:Burpsuit.Python27.sqlmap 2 安装配置 2.1 Burpsuit 1) 解压Burpsuit 2) ...
- Win10下Pytorch的安装和使用[斗之力三段]
简介: 看到paper的代码是用Pytorch实现的,试图理解代码,但是看不懂,只能先学一些基础教程来帮助理解.笔记本电脑配置较低,所以安装一个没有CUDA的版本就可以了.安装完之后,就可以跟着教程边 ...
- 线段树——hdu1754I Hate It
一.题目回顾 题目链接:I Hate It Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感.不管你喜不喜欢 ...