掌握el-table的formatter方法，提升数据展示效果
前言
数据可视化是现代软件开发中必不可少的一环。而在开发中，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 函数格式化表格中的数据。
实例1：通过
methods实现
<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: {
typeFormat(row) {
if (this.options) {
for (let i = 0; i < this.options.length; i++) {
if (this.options[i].value == row.type) {
return this.options[i].label;
}
}
return "--";
}
},
},
};
script>
实例2：通过
computed实现
<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种类型",
},
],
};
},
computed: {
typeFormat() {
if (this.options) {
return (row) => {
const match = this.options.find((e) => e.value == row.type);
return match ? match.label : "--";
};
}
},
},
};
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>
展示效果：
相关推荐
⭐ 字典表匹配数据，让你的微信小程序更高效