前言

数据可视化是现代软件开发中必不可少的一环。而在开发中，el-table 作为一款常用的表格组件，其通过 formatter 方法可以轻松实现数据格式化。本文将为大家详细介绍 el-table 的 formatter 方法的使用技巧。

常规写法：

<el-table :data="tableData" border><el-table-column prop="type" label="种类"><template slot-scope="scope"><span v-if="scope.row.type == '1'">类型1</span><span v-if="scope.row.type == '2'">类型2</span><span v-if="scope.row.type == '3'">类型3</span></template></el-table-column>
</el-table>

formatter 是什么？

formatter 函数简单来说就是可以用来将表格中的数据做进一步的处理。

formatter 函数的三个基础参数

参数	描述
value	字段值
row	单元格行数据
index	单元格行索引

使用

通过上述我们对使用 formatter 函数已经有了基本的认识，下面我们就通过运用 formatter 函数格式化表格中的数据。

实例

<template><div><el-table :data="tableData"><el-table-column align="center" type="index" label="序号"></el-table-column><el-table-column align="center" prop="type" label="种类" :formatter="typeFormat"></el-table-column></el-table></div>
</template><script>
export default {data() {return {// 模拟表格数据tableData: [{type: 1,},{type: 2,},{type: 3,},],// 模拟匹配数据options: [{value: "1",label: "第一种类型",},{value: "2",label: "第二种类型",},{value: "3",label: "第三种类型",},{value: "n",label: "第n种类型",},],};},methods: {//表格中formatter绑定的typeFormat方法typeFormat(row, column) {if (this.options) {//非空判断是为了避免循环的数组为null而产生报错var data = "";this.options.forEach((item, index) => {if (row.type == item.value) {data = item.label;}});return data;}},},
};
</script>

展示效果：

上面我们演示的案例，后台返回的字典值只是单个的，有些时候，需求可能需要后台既可以返回单个的也可以返回多个的，即 type 返回的值可能是 "1"，也可能是 "1,3"，这种数据该怎么处理呢？

实例

<template><div><el-table :data="tableData"><el-table-column align="center" type="index" label="序号"></el-table-column><el-table-column align="center" prop="type" label="种类" :formatter="typeFormat"></el-table-column></el-table></div>
</template><script>
export default {data() {return {// 模拟表格数据tableData: [{type: "1,2",},{type: "2",},{type: "1,2,3",},],// 模拟匹配数据options: [{value: "1",label: "第一种类型",},{value: "2",label: "第二种类型",},{value: "3",label: "第三种类型",},{value: "n",label: "第n种类型",},],};},methods: {//表格中formatter绑定的typeFormat方法typeFormat(row, column) {var data = [];// 防止接口返回null而产生报错等问题if (row.type == null) {row.type = "";}// 先将其分割成字符串数组let resMap = row.type.split(",");resMap.map((item) => {if (this.options) {this.options.forEach((e, index) => {if (item == e.value) {data.push(e.label);}});}});// 最后把处理好的数据转换为一个字符串，以“,”隔开data = data.join("，");return data;},},
};
</script>

展示效果：

封装公共枚举类型转码

当一个项目中有 n 个地方都用到同样的数据源时，这个时候我们就要考虑将其封装成公共的方法，通过传参接参的形式返回转码后的中文。

实现过程

1. 我们尽可能选择首页或者登录后进入的页面去请求接口，然后通过传不同的参数将其对应返回的数据存储在浏览器中，如下：

mounted() {this.findByName("car_type");this.findByName("pfjd_type");this.findByName("cpys_type");this.findByName("rlzl_type");this.findByName("industry_type");
},
methods: {// 调用接口并将参数传递进来findByName(value) {findByName(this.$qs.stringify({ name: value })).then((res) => {if ("car_type" == value) {sessionStorage.setItem("carTypeList", JSON.stringify(res.data));}if ("pfjd_type" == value) {sessionStorage.setItem("pfjdTypeList", JSON.stringify(res.data));}if ("cpys_type" == value) {sessionStorage.setItem("cpysTypeList", JSON.stringify(res.data));}if ("rlzl_type" == value) {sessionStorage.setItem("rlzlTypeList", JSON.stringify(res.data));}if ("industry_type" == value) {sessionStorage.setItem("industryTypeList", JSON.stringify(res.data));}});},
},

2. 创建公共封装的 js 文件，写入前端枚举转换共用方法，进行码表转换，如下：

export function GetTransformItem(type, code) {if (!code) {return "--";}var codeList = JSON.parse(sessionStorage.getItem(type));var item = codeList.filter((o) => {return o.value.toString() == code.toString();});let obj = item[0];return obj && obj.label ? obj.label : "--";
}// 接收传入的参数  type [枚举类型] code [枚举值]
export function TransformByCode(type, code) {console.log(type, code);let str = "";switch (type) {case "car_type"://车辆类型str = GetTransformItem("carTypeList", code);break;case "pfjd_type"://排放阶段str = GetTransformItem("pfjdTypeList", code);break;case "cpys_type"://车牌颜色str = GetTransformItem("cpysTypeList", code);break;case "rlzl_type"://燃料类型str = GetTransformItem("rlzlTypeList", code);break;case "industry_type"://行业类别str = GetTransformItem("industryTypeList", code);break;}return str;
}

3. 在使用页面中引入封装文件，并在使用时将 type 与 code 传给 TransformByCode 方法。

3.1 html 中

<div>{{getLabelByCode("car_type", scope.row.car)}}</div>

3.2 引入封装文件 enumerate.js

import { TransformByCode } from "@/utils/enumerate";

3.3 methods 方法中

 methods: {getLabelByCode(type, code) {return TransformByCode(type, code);},
},

4. 实例1

<template><div><el-table :data="tableData"><el-table-column align="center" type="index" label="序号"></el-table-column><el-table-column align="center" prop="car" label="种类"><template slot-scope="scope">{{getLabelByCode("car_type", scope.row.car)}}</template></el-table-column></el-table></div>
</template>
<script>
import { TransformByCode } from "@/utils/enumerate";
export default {data() {return {// 模拟表格数据tableData: [{car: 1,},{car: 2,},],};},methods: {getLabelByCode(type, code) {return TransformByCode(type, code);},},
};
</script>

展示效果：

5. 实例2

<template><div><!-- 页面调用方法，并传入类型 --><div>车辆类型：{{getLabelByCode("car_type", particulars.carData)}}</div><div>排放阶段：{{getLabelByCode("pfjd_type", particulars.pfjdData)}}</div><div>车牌颜色：{{getLabelByCode("cpys_type", particulars.cpysData)}}</div><div>燃料类型：{{getLabelByCode("rlzl_type", particulars.rllxData)}}</div><div>行业类别：{{getLabelByCode("industry_type", particulars.hylbData)}}</div></div>
</template><script>
import { TransformByCode } from "@/utils/enumerate";
export default {data() {return {// 模拟数据particulars: {carData: "1",pfjdData: "1",cpysData: "2",rllxData: "1",hylbData: null, //模拟非常规返回数据时},};},methods: {// 转码操作getLabelByCode(type, code) {return TransformByCode(type, code);},},
};
</script>

展示效果：

当然，如果你对微信小程序中的数据匹配感兴趣，也可以参考博主的另一篇文章微信小程序通过字典表匹配对应数据

掌握el-table的formatter方法，提升数据展示效果相关推荐

table表格的使用(动态数据展示)
# table表格的使用(动态数据展示) ## 第一种方式<el-table :data="tableDataalllist" border style="widt ...
知物由学 | 多级建模方法提升汉语语音识别效果，获ISCSLP大赛认可
导读:语音是人类信息沟通的重要途径,同时也是人机交互的重要桥梁,自动语音识别可以表述为通过计算机将人类语音信号转录为书面形式的文字输出的过程.本文分享了网易易盾提出的多级建模单元的端到端汉语语音识别方 ...
bootstrap table通过ajax获取后台数据展示在table
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...
Echarts中条形统计图设置两条数据展示效果-图例样式位置设置
option = {color: ['#36468C','#B2C8FF'],tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器,坐标轴触发有效typ ...
19.2、Javaweb案例_Servlet代码抽取优化分页数据redis缓存优化分页数据展示
优化Servlet 目的减少Servlet的数量,现在是一个功能一个Servlet,将其优化为一个模块一个Servlet,相当于在数据库中一张表对应一个Servlet,在Servlet中提供不同的方 ...
使用开源Datav——结合vue实现大屏数据展示案例
Datav简介: 组件库基于Vue ,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用. 文档链接:Datav-Vue 大屏数据展示组件库代码下载:datav大屏数据展示 ...
html table清空数据,javascript清空table表格的方法
本文实例讲述了javascript清空table表格的方法.分享给大家供大家参考.具体如下: 1. 通常方法循环table的rows,然后一个一个删除. 这个方法是通常的方法,可行,但是效率不好. ...
JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】...
什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...
JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】
什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...

掌握el-table的formatter方法，提升数据展示效果

前言

formatter 是什么？

使用

封装公共枚举类型转码

实现过程

1. 我们尽可能选择首页或者登录后进入的页面去请求接口，然后通过传不同的参数将其对应返回的数据存储在浏览器中，如下：

2. 创建公共封装的 `js` 文件，写入前端枚举转换共用方法，进行码表转换，如下：

3. 在使用页面中引入封装文件，并在使用时将 `type` 与 `code` 传给 `TransformByCode` 方法。

4. 实例1

5. 实例2

掌握el-table的formatter方法，提升数据展示效果相关推荐

最新文章

热门文章

掌握el-table的formatter方法，提升数据展示效果

前言

formatter 是什么？

使用

封装公共枚举类型转码

实现过程

1. 我们尽可能选择首页或者登录后进入的页面去请求接口，然后通过传不同的参数将其对应返回的数据存储在浏览器中，如下：

2. 创建公共封装的 js 文件，写入前端枚举转换共用方法，进行码表转换，如下：

3. 在使用页面中引入封装文件，并在使用时将 type 与 code 传给 TransformByCode 方法。

4. 实例1

5. 实例2

掌握el-table的formatter方法，提升数据展示效果相关推荐

最新文章

热门文章

2. 创建公共封装的 `js` 文件，写入前端枚举转换共用方法，进行码表转换，如下：

3. 在使用页面中引入封装文件，并在使用时将 `type` 与 `code` 传给 `TransformByCode` 方法。