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

前言

数据可视化是现代软件开发中必不可少的一环。而在开发中,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 函数格式化表格中的数据。

实例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>

展示效果:
掌握el-table的formatter方法,提升数据展示效果_第1张图片


上面我们演示的案例,后台返回的字典值只是单个的,有些时候,需求可能需要后台既可以返回单个的也可以返回多个的,即 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>


展示效果:

掌握el-table的formatter方法,提升数据展示效果_第2张图片


封装公共枚举类型转码

当一个项目中有 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>

展示效果:
掌握el-table的formatter方法,提升数据展示效果_第3张图片


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方法,提升数据展示效果_第4张图片


相关推荐

⭐ 字典表匹配数据,让你的微信小程序更高效

你可能感兴趣的:(element,前端,vue)