admin 管理员组

文章数量: 894082

掌握el

前言

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

常规写法:

<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. 在使用页面中引入封装文件,并在使用时将 typecode 传给 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