el-table表格格式化某一列数据；统一处理el-table表格某一列数据

以下代码可以直接复制使用

场景：table的原数据就是姓名1234，但是现在想要改成统一的格式。可以使用formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

新数据:

解决方案：在需要处理的那行，添加 :formatter=“formatter” 属性和处理方法,使用此属性，不会改变原表格数据tableData

<template><div tyle="width: 1000px;"><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180" :formatter="formatter"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table><el-button @click="getdata">获取列表数据</el-button></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-02',name: '1',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '2',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '3',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '4',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {formatter (row, column) {console.log(row, column)// switch (row.name) {//   case '1'://     return '用户1'//   case '2'://     return '用户2'//   case '3'://     return '用户3'//   case '4'://     return '用户4'// }let newName = '用户' + row.namereturn newName},getdata () {console.log(this.tableData)}}
}
</script>

el-table表格格式化某一列数据；统一处理el-table表格某一列数据相关推荐

【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成弹框修改数据
前言这是继我另一个帖子就是单元格点击变成输入框后添加的功能因为考虑到有些时候修改单元格的信息可能点击后要修改很多,那一个输入框不好用所以这时候就需要一个弹框可以把所有表单都显示出来修改所以这里 ...
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
excel添加列下拉框票价_excel表格下拉表格添加数据-excel2017表格中怎么制作下拉菜单列表框...
在Excel表中,如何将增加下拉菜单的选项? excel中的下拉菜单选项,就是筛选的功能,具体操作如下: 1.首先选中a.b两列数据,在"开始"选项卡上选择"筛选&quo ...
layui控制table列长度_layui表头宽度和表格一致_天天都要用的10个word表格技巧，工作再忙都要学会！！......
Hello,各位叨友们好呀!我是叨叨君~ 说起制作表格可不是Excel的专利,日常工作中,用Word制作表格也是常有的事儿,对于有些小伙伴来说,可能天天都要用,那么,用Word制作表格,有哪些技巧是我 ...
固定表头和第一列、内容可滚动的table表格
本文首发我的简书鉴于之前有几个项目都用到了第一行第一列固定不动的表格,所以整理了一下制作这种表格的方法. 基本原理是把表格分为四个部分,左上角是固定不动的,第一行和第一列是半固定的,只能左右 ...
R语言使用order函数按照两个数据列的值排序data.table数据（主变量降序排序、次变量升序排序）
R语言使用order函数按照两个数据列的值排序data.table数据(主变量降序排序.次变量升序排序) 目录
两列模糊对比 oracle,excel 模糊比对两列数据并将比对结果显示出来 | excel表格两列数据模糊对比...
excel2016如何将两列完全不一样的数据进行模糊对比? B2单元格输入公式=IF(ISNUMBER(FIND(LEFT(A2,3),PHONETIC(G$2:G$8))),"" ...
单元格内多个姓名拆分成一列_excel将一列数据拆为多个表格-excel：如何将一个单元格拆分成多行或多列？...
如何将一个Excel工作表的数据按一列的关键字拆分成... 工具/材料:Microsoft Office Excel2016版,Excel文档. 1.首先选中Excel文档,双击打开. 2.然后在该界 ...
matlab 图标分为两列,excel表格各组数据作图-EXCEL里如何将表示两组数据的两种图形放在同一个表......
EXCEL图表中,如何把3组完全不同单位.不同数量级... 1.首先将excel表格打以WPS版本为打开后在里面输入相. 2.数据输入完毕之后,将需要的数据选中. 3.然后点击工具栏上面的插入,选中图 ...
使用NG-ZORRO（Angular 组件库）中Table组件，通过columnTable属性固定列，结果每行数据内容穿透了两遍的固定列；鼠标滑过该条数据时，两侧固定列的背景色不跟着改变～
[问题] 使用NG-ZORRO(Angular 组件库)中Table组件,通过#columnTable属性固定列,结果每行数据内容穿透了两遍的固定列(因为是刚开始做这个项目,所以盲猜是之前某位同仁搞个 ...

el-table表格格式化某一列数据；统一处理el-table表格某一列数据

以下代码可以直接复制使用

el-table表格格式化某一列数据；统一处理el-table表格某一列数据相关推荐

最新文章

热门文章