Vue3实战第十二章表格组件里el-table-column 的 formatter属性应用

浅浅的花香味﹌ 2024-04-23 21:07 48阅读 0赞

?作者主页：青花锁 ?简介：Java领域优质创作者?、Java微服务架构公号作者?

?简历模板、学习资料、面试题库、技术互助

?文末获取联系方式 ?

![在这里插入图片描述][8e79f79251004be596a5f46b79e5197a.png]

--------------------

## 往期热门专栏回顾 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">专栏</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Java项目实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12345409.html" rel="nofollow">介绍Java组件安装、使用；手写框架等</a></td> 
  </tr> 
  <tr> 
   <td align="left">Aws服务器实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12492968.html" rel="nofollow">Aws Linux服务器上操作nginx、git、JDK、Vue</a></td> 
  </tr> 
  <tr> 
   <td align="left">Java微服务实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12439818.html" rel="nofollow">Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Java基础篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12369312.html" rel="nofollow">Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Springboot篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12273537.html" rel="nofollow">从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Spring MVC篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12295009.html" rel="nofollow">从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回 </a></td> 
  </tr> 
  <tr> 
   <td align="left">华为云服务器实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12426609.html" rel="nofollow">华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Java爬虫</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_8863085.html" rel="nofollow">通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Vue实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12278346.html" rel="nofollow">讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Spring</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12283629.html" rel="nofollow">讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等 </a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

《Vue3实战》篇章整体栏目  
—————————————————————————————  
[【第一章】node.js/npm安装、配置][node.js_npm]  
[【第二章】创建项目和目录结构][Link 1]  
[【第三章】基础语法][Link 2]  
[【第四章】条件语句、循环语句][Link 3]  
[【第五章】计算、监听属性][Link 4]  
[【第六章】样式绑定和事件处理][Link 5]  
[【第七章】表单][Link 6]  
[【第八章】自定义指令][Link 7]  
[【第九章】路由][Link 8]  
[【第十章】Element plus指南][Element plus]  
[【第十一章】Vue里的Axios及使用get、post请求][Vue_Axios_get_post]  
[【第十二章】表格组件里el-table-column 的 formatter属性应用][el-table-column _ formatter]

—————————————————————————————

--------------------

## 前言 ##

今天讲解表格组件里el-table-column 的 formatter属性应用，比如时间格式化、数据格式化、状态格式化等，解决我们急需的功能，也方便以后自己查找。

## 1、使用方式 ##

在 Vue 中，el-table-column 的 formatter 属性允许你定义一个方法来格式化单元格的显示内容。
    这个属性通常用于 Element UI 的 <el-table> 组件中。

### 1.1、在el-table-column 标签中指定 formatter 属性 ###

首先，你需要在 <el-table-column> 标签中指定 formatter 属性，并将其设置为一个方法名：

### 1.2、定义方法 ###

然后，在 Vue 组件的 methods 部分定义这些方法：

在上面的代码中，formatDate 和 formatAmount 方法被用作格式化函数。这些方法接受四个参数：

*  row：当前行的数据对象。
 *  column：当前列的定义。
 *  cellValue：当前单元格的值，由 prop 属性指定。
 *  index：当前行的索引。

这些方法返回格式化后的显示内容。在 formatDate 方法中，日期被转换为本地日期字符串。在 formatAmount 方法中，金额被格式化为具有两位小数和逗号分隔符的货币格式。

请确保你的 Element UI 组件库已经正确安装并导入到项目中，因为 el-table 和 el-table-column 是 Element UI 提供的组件。如果你使用的是 Element Plus（Element UI 的 Vue 3 版本），确保导入的是正确的库版本。

--------------------

## 2、实战代码 ##

*  创建vue3项目  
    [【第一章】node.js/npm安装、配置][node.js_npm]  
    [【第二章】创建项目和目录结构][Link 1]
 *  引入Element Plus组件  
    [【第十章】Element plus指南][Element plus]
 *  实际应用

### 2.1、格式化时间实际应用和效果 ###

![在这里插入图片描述][3a04c49e06e14611a22a3f6a406ba065.png]  
![在这里插入图片描述][de1b1e28034148c2b8e7b5f08db6fa02.png]

<template>
      <div style="margin-top: 15px;">
        <el-row>
          <el-col :span="11">
            <el-input
                placeholder="请输入分组名称"
                v-model="groupName"
                clearable >
              <template #prepend>分组名称</template>
            </el-input>
          </el-col>
          <el-col :span="2"><div class="grid-content ep-bg-purple-light" /></el-col>
          <el-col :span="11">
            <el-button type="primary" plain style="width: 100%;" @click="query">查询</el-button>
          </el-col>
        </el-row>
        <br>
        <el-row>
          <el-col :span="20"> </el-col>
          <el-col :span="4">
            <el-button type="primary" style="width: 100%;" @click="query">新增分组</el-button>
          </el-col>
        </el-row>
    
        <br>
        <el-table  :data="parkingLotGroupList"  stripe style="width: 100%" v-loading="loading">
          <el-table-column   prop="groupId"  label="分组编号"  min-width="8%"> </el-table-column>
          <el-table-column   prop="groupName"  label="分组名称"  min-width="20%"> </el-table-column>
          <el-table-column   prop="groupDescription" label="描述信息" min-width="20%" > </el-table-column>
          <el-table-column   prop="location" label="地理位置" min-width="12%" > </el-table-column>
          <el-table-column   prop="createTime" label="创建时间" min-width="15%" :formatter="timeFormatter" > </el-table-column>
          <el-table-column   prop="operate" label="操作" min-width="25%">
            <el-row>
              <el-col :span="1"><div class="grid-content ep-bg-purple-light" /></el-col>
              <el-col :span="11">
                <el-button type="primary" style="width: 100%;" @click="query">查看其下车辆</el-button>
              </el-col>
              <el-col :span="12"><div class="grid-content ep-bg-purple-light" /></el-col>
            </el-row>
          </el-table-column>
        </el-table>
      </div>
    
    </template>
    
    <script>
    import axios from "axios";
    
    export default {
          
      name: "parkingLotGroup",
      data(){
          
        return{
          
          title: "分组信息管理",
          groupName: "",
          loading: false ,
          parkingLotGroupList: []
        }
      },
      mounted(){
          
        this.invokeList();
      },
      methods:{
          
        timeFormatter(row, column , cellValue) {
          
          const date = new Date(cellValue * 1000);
          // 使用本地时间格式
          return date.toLocaleString();
        },
        openErrorAlert(message) {
          
          this.$message({
          
            message: message,
            type: 'error'
          });
        },
        openSuccessAlert(message) {
          
          this.$message({
          
            message: message,
            type: 'success'
          });
        },
        query() {
          
          this.invokeList();
        },
        invokeList() {
          
          var queryUrl = "http://127.0.0.1:8080/parkingLotGroups/queryByParams?name=";
          if(this.groupName.length > 0) {
          
            queryUrl += this.groupName;
          }
    
          //axios调用后台get方法
          axios.get(queryUrl)
              .then(response =>{
          
                //对返回结果进行处理
                console.log("response:" + JSON.stringify(response));
                this.loading = false;
                this.data = response.data;
                if(this.data.code == 200) {
          
                  this.parkingLotGroupList = this.data.data;
                } else {
          
                  this.openErrorAlert(this.data.message);
                }
              }).catch(function(error){
          
            this.loading = false;
            //异常处理
            console.log(error);
          })
        }
      }
    }
    </script>
    
    
    <style scoped>
    
    </style>

--------------------

### 2.2、格式化状态实际应用和效果 ###

![在这里插入图片描述][99e041aa3d1a4799907a0b2066435c55.png]

<template>
      <div style="margin-top: 15px;">
        <el-row>
          <el-col :span="11">
            <el-input
                placeholder="请输入a"
                v-model="a"
                clearable >
              <template #prepend>a名称</template>
            </el-input>
          </el-col>
          <el-col :span="2"><div class="grid-content ep-bg-purple-light" /></el-col>
          <el-col :span="11">
            <el-input
                placeholder="请输入最少的**"
                v-model.number="minBatteryCapacityPercentage"
                type="number"
                min="1"
                max="100"
                clearable >
              <template #prepend>至少有多少**</template>
            </el-input>
          </el-col>
        </el-row>
        <br>
        <el-row>
          <el-col :span="13"><div class="grid-content ep-bg-purple-light" /></el-col>
          <el-col :span="11">
            <el-button type="primary" style="width: 100%;" @click="query">查询</el-button>
          </el-col>
        </el-row>
    
        <br>
        <el-table  :data="parkingBarrierList"  stripe style="width: 100%" v-loading="loading">
          <el-table-column   prop="id"  label="设备编号"  min-width="8%"> </el-table-column>
          <el-table-column   prop="imei"  label="设备imei"  min-width="17%"> </el-table-column>
          <el-table-column   prop="batteryCapacityPercentage" label="电池容量%数" min-width="10%" > </el-table-column>
          <el-table-column   prop="vehicleStatus" label="是否有车" min-width="12%" :formatter="vehicleStatusFormatter" > </el-table-column>
          <el-table-column   prop="lockOpenStatus" label="打开状态" min-width="12%" :formatter="lockOpenStatusFormatter"> </el-table-column>
          <el-table-column   prop="lockCloseStatus" label="关闭状态" min-width="12%" :formatter="lockCloseStatusFormatter" > </el-table-column>
          <el-table-column   prop="lockStatus" label="开关状态" min-width="12%" :formatter="lockStatusFormatter"> </el-table-column>
          <el-table-column   prop="crcChecksum" label="CRC验证码" min-width="10%"> </el-table-column>
          <el-table-column   prop="operate" label="操作" min-width="20%">
            <el-row>
              <el-col :span="1"><div class="grid-content ep-bg-purple-light" /></el-col>
              <el-col :span="22">
                <el-button type="primary" style="width: 100%;" @click="query">绑定车位</el-button>
              </el-col>
              <el-col :span="1"><div class="grid-content ep-bg-purple-light" /></el-col>
            </el-row>
          </el-table-column>
        </el-table>
      </div>
    
    </template>
    
    <script>
    import axios from "axios";
    
    export default {
          
      name: "ParkingBarrier",
      data(){
          
        return{
          
          title: "ParkingBarrier",
          minBatteryCapacityPercentage: 0,
          a: "",
          loading: false ,
          parkingBarrierList: []
        }
      },
      mounted(){
          
        this.invokeList();
      },
      methods:{
          
        vehicleStatusFormatter(row, column , cellValue) {
          
          return cellValue === 1 ? '有' : '无';
        },
        lockOpenStatusFormatter(row, column , cellValue) {
          
          return cellValue === 1 ? '正在打开' : '打开完成';
        },
        lockCloseStatusFormatter(row, column , cellValue) {
          
          return cellValue === 1 ? '正在关闭' : '关闭完成';
        },
        lockStatusFormatter(row, column , cellValue) {
          
          return cellValue === 1 ? '打开状态' : '关闭状态';
        },
        openErrorAlert(message) {
          
          this.$message({
          
            message: message,
            type: 'error'
          });
        },
        openSuccessAlert(message) {
          
          this.$message({
          
            message: message,
            type: 'success'
          });
        },
        query() {
          
          this.invokeList();
        },
        invokeList() {
          
          var queryUrl = "http://127.0.0.1:8080/deviceCommunications/imei?imei=";
          if(this.imei.length > 0) {
          
            queryUrl += this.imei;
          }
          if(this.minBatteryCapacityPercentage > 0) {
          
            queryUrl += "&minBatteryCapacityPercentage=" + this.minBatteryCapacityPercentage;
          }
    
          //axios调用后台get方法
          axios.get(queryUrl)
              .then(response =>{
          
                //对返回结果进行处理
                console.log("response:" + JSON.stringify(response));
                this.loading = false;
                this.data = response.data;
                if(this.data.code == 200) {
          
                  this.parkingBarrierList = this.data.data;
                } else {
          
                  this.openErrorAlert(this.data.message);
                }
              }).catch(function(error){
          
            this.loading = false;
            //异常处理
            console.log(error);
          })
        }
      }
    }
    </script>
    
    
    <style scoped>
    
    </style>

--------------------

资料获取，更多粉丝福利，关注下方公众号获取

![在这里插入图片描述][a74f7d5d03234f7c8a635562034442a0.gif_pic_center]

[8e79f79251004be596a5f46b79e5197a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/b5dde2f881564f5383c215ec18e978c0.png
[node.js_npm]: https://blog.csdn.net/s445320/article/details/130107403
[Link 1]: https://blog.csdn.net/s445320/article/details/130108162
[Link 2]: https://blog.csdn.net/s445320/article/details/130198834
[Link 3]: https://blog.csdn.net/s445320/article/details/130200350
[Link 4]: https://blog.csdn.net/s445320/article/details/130200783
[Link 5]: https://blog.csdn.net/s445320/article/details/130200903
[Link 6]: https://blog.csdn.net/s445320/article/details/130213404
[Link 7]: https://blog.csdn.net/s445320/article/details/130213662
[Link 8]: https://blog.csdn.net/s445320/article/details/130110029
[Element plus]: https://blog.csdn.net/s445320/article/details/130197081
[Vue_Axios_get_post]: https://blog.csdn.net/s445320/article/details/131490211
[el-table-column _ formatter]: https://blog.csdn.net/s445320/article/details/136642080
[3a04c49e06e14611a22a3f6a406ba065.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/942c056b4b354781a9aaa13c50a9b06b.png
[de1b1e28034148c2b8e7b5f08db6fa02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/38f0d67bf90d41b0a1f598eebc24f2f7.png
[99e041aa3d1a4799907a0b2066435c55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/57e6ef2b2c2442a8b4ef7cf913cde061.png
[a74f7d5d03234f7c8a635562034442a0.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8835972c3e424fba82ba799a2e05c0e7.gif